Browse Source

Fix #67: Various enhancements for IE browsers

Kartik Visweswaran 10 năm trước cách đây
mục cha
commit
6b1212e411
5 tập tin đã thay đổi với 45 bổ sung16 xóa
  1. 7 1
      CHANGE.md
  2. 1 1
      bower.json
  3. 4 1
      examples/index.html
  4. 33 13
      js/fileinput.js
  5. 0 0
      js/fileinput.min.js

+ 7 - 1
CHANGE.md

@@ -1,11 +1,17 @@
 version 3.0.0
 =============
-**Date:** 03-Dec-2014
+**Date:** 05-Dec-2014
 
 1. (enh #60): Enhance upload button for disable/enable when used with `<a>` tag.
 2. (bug #61): Refresh preview to show errors correctly after each file is validated.
 3. (enh #64): Add ability to override the slug method with a `slugCallback` property.
 4. (enh #65): Correct validation of `refreshPreview` using `updateFileDetails`.
+5. (enh #67): Enhance support for IE browsers
+    - Add specific validations for parsing IE versions rightly
+    - Enhance plugin to extend styling support to IE 9 (with the limitation that IE 9 does not support HTML 5 features like multiple file upload)
+    - Fix clearing of file input rightly for IE 9 & IE 10
+    - Degrade plugin automatically to a native file input for older IE versions
+    - Prevent change method firing twice when file is cleared after error is encountered in IE 11.
 
 version 2.9.0
 =============

+ 1 - 1
bower.json

@@ -1,6 +1,6 @@
 {
     "name": "bootstrap-fileinput",
-    "version": "3.0.0",
+    "version": "3.1.0",
     "homepage": "https://github.com/kartik-v/bootstrap-fileinput",
     "authors": [
         "Kartik Visweswaran <[email protected]>"

+ 4 - 1
examples/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<!-- release v2.4.0, copyright 2014 Kartik Visweswaran -->
+<!-- release v3.0.0, copyright 2014 Kartik Visweswaran -->
 <html lang="en">
     <head>
         <meta charset="UTF-8"/>
@@ -14,6 +14,9 @@
         <div class="container">
             <h1>Bootstrap File Input Example</h1>
             <form enctype="multipart/form-data">
+                <div class="form-group">
+                    <input id="file-0" class="file" type="file" multiple=true data-show-preview="false">
+                </div>
                 <div class="form-group">
                     <input id="file-1" class="file" type="file" multiple=true data-preview-file-type="any">
                 </div>

+ 33 - 13
js/fileinput.js

@@ -163,6 +163,14 @@
         uniqId = function () {
             return Math.round(new Date().getTime() + (Math.random() * 100));
         },
+        isIE = function(ver) {
+            var div = document.createElement("div"), status;
+            div.innerHTML = "<!--[if IE " + ver + "]><i></i><![endif]-->";
+            status = (div.getElementsByTagName("i").length == 1);
+            document.body.appendChild(div);
+            div.parentNode.removeChild(div);
+            return status;
+        },
         hasFileAPISupport = function () {
             return window.File && window.FileReader && window.FileList && window.Blob;
         },
@@ -178,7 +186,7 @@
 
     var FileInput = function (element, options) {
         this.$element = $(element);
-        if (hasFileAPISupport()) {
+        if (hasFileAPISupport() || isIE(9)) {
             this.init(options);
             this.listen();
         } else {
@@ -191,6 +199,8 @@
         init: function (options) {
             var self = this;
             self.reader = null;
+            self.isIE9 = isIE(9);
+            self.isIE10 = isIE(10);
             self.showCaption = options.showCaption;
             self.showPreview = options.showPreview;
             self.autoFitCaption = options.autoFitCaption;
@@ -363,23 +373,26 @@
             // Fix for IE ver < 11, that does not clear file inputs
             // Requires a sequence of steps to prevent IE crashing but
             // still allow clearing of the file input.
-            if (/MSIE/.test(navigator.userAgent)) {
-                var $frm1 = $el.closest('form');
-                if ($frm1.length) {
-                    $el.wrap('<form>');
-                    var $frm2 = $el.closest('form'), $tmpEl = $(document.createElement('div'));
-                    $frm2.before($tmpEl).after($frm1).trigger('reset');
-                    $el.unwrap().appendTo($tmpEl).unwrap();
+            if (self.isIE9 || self.isIE10) {
+                var $srcFrm = $el.closest('form'), 
+                    $tmpFrm = $(document.createElement('form')),
+                    $tmpEl = $(document.createElement('div'));
+                $el.before($tmpEl);
+                if ($srcFrm.length) {
+                    $srcFrm.after($tmpFrm);
                 } else {
-                    $el.wrap('<form>').closest('form').trigger('reset').unwrap();
-                }   
+                    $tmpEl.after($tmpFrm);
+                }
+                $tmpFrm.append($el).trigger('reset');
+                $tmpEl.before($el).remove();
+                $tmpFrm.remove();
             } else { // normal input clear behavior for other sane browsers
                 $el.val('');
             }
         },
         clear: function () {
             var self = this, e = arguments.length && arguments[0];
-            if (self.reader instanceof FileReader) {
+            if (!self.isIE9 && self.reader instanceof FileReader) {
                 self.reader.abort();
             }
             self.autoSizeCaption();
@@ -673,6 +686,9 @@
             var self = this, $el = self.$element, label = self.slug($el.val()),
                 total = 0, $preview = self.$preview, files = $el.get(0).files, msgSelected = self.msgSelected,
                 numFiles = !isEmpty(files) ? (files.length + self.initialPreviewCount) : 1, tfiles;
+            if (self.isError) {
+                return;
+            }
             self.hideFileIcon();
             if (e.target.files === undefined) {
                 tfiles = e.target && e.target.value ? [
@@ -700,7 +716,11 @@
                 self.$container.removeClass('file-input-new');
                 return;
             }
-            self.readFiles(files);
+            if (!self.isIE9) {
+                self.readFiles(files);
+            } else {
+                self.updateFileDetails(1);
+            }
             self.reader = null;
         },
         autoSizeImage: function(previewId) {
@@ -807,7 +827,7 @@
 
     //FileInput plugin definition
     $.fn.fileinput = function (option) {
-        if (!hasFileAPISupport()) {
+        if (!hasFileAPISupport() && !isIE(9)) {
           return;
         }
         

Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 0 - 0
js/fileinput.min.js


Một số tệp đã không được hiển thị bởi vì quá nhiều tập tin thay đổi trong này khác