javascript - 图片上传预览在 IE 上太慢

Question

这是我的代码。它在 Chrome 上运行良好，但在 IE 上太慢了。我尝试使用 javascript 而不是 jquery 但没有任何改变!

每个人都说 innerHTML 比 append 快。但是当我使用 innerHTML 而不是 append 时，没有任何改变。我真的需要一些建议。 谢谢

 <input id="uploadPhoto" name="uploadPhoto" type="file" multiple accept="image/*" />

                $("#uploadPhoto").on('change', function () {
                    var $this = $(this);
                    var countOfFiles = $this[0].files.length;
                    var maxSize = countOfFiles * 5242880;
                    if($this[0].files[0].size > maxSize)
                    {
                        $.smallBox({
                            title : "too big size",
                            color : "#c69120",
                            iconSmall : "fa fa-warning fa-2x fadeInRight animated",
                            timeout : 9000
                        });
                        $('#uploadPhoto').val('');
                    }
                    else
                    {

                        var input = document.getElementById('uploadPhoto');
                        var files = $this[0].files;
                        var imgPath = $this[0].value;
                        var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
                        var image_holder = $("#image-holder");
                        image_holder.empty();
                        if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
                            if (typeof (FileReader) != "undefined") {
                                var i = 0,
                                len = files.length;
                                (function readFile(n) {
                                    var reader = new FileReader();
                                    var f = files[n];

                                    storedPhotos.push(files[n]);
                                    var ustdiv ='<div class="postimage col-md-12">'
                                    reader.onload = function (e) {
                                        var spanDiv = "<div class='col-md-3 col-lg-3 col-sm-4 col-xs-6 no-padding tempFile'><span class='close closeselected'>&times;</span>";
                                        var imageDiv = "<img class='img-responsive' data-id='" + f.name + "' src='" + e.target.result + "'/></div>";
                                        var sonDiv = spanDiv + imageDiv +'</div>';
                                        $(sonDiv).appendTo(image_holder);

                                        if (n < len - 1) readFile(++n)
                                    };
                                    reader.readAsDataURL(f);
                                }(i));

                            } else {
                                alert("This browser does not support FileReader.");
                            }
                        } else {
                            alert("Only image files!");
                        }
                    }
                });

Answer 1

时间长的原因是二进制数据要和字符串格式(这里是Base-64)进行转换、编码(FileReader.readAsDataURL())和解码(Image)，在IE中比较慢.保留“流程链”二进制文件将显着加快处理速度。

所以使用Blob与 Blob-URLs 一起反而。这将在所有浏览器中更快地工作并使用更少的内存，including IE .这也消除了 FileReader，因为我们可以直接使用 File 对象，因为它只是 Blob 的子类。

document.getElementById("i").onchange = function() {

  // create Blob-URL for File (=Blob) object
  var url = (URL || webkit).createObjectURL(this.files[0]);
  
  // set Blob-URL as image source:
  document.getElementById("img").src = url;
};

<label>Select image: <input id=i type=file></label><br>
<img id=img>

根据需要应用到您的场景。

document.getElementById("i").onchange = function() {

  // multiple image files
  for(var i=0; i < this.files.length; i++) {
    var img = new Image();
    img.title = this.files[i].name; // hover the image to see name
    img.onload = cleanup;           // release memory locked by Blob-URL
    img.src = (URL || webkit).createObjectURL(this.files[i]);
    document.body.appendChild(img);
  }
  function cleanup() {(URL || webkit).revokeObjectURL(this.src)};
};

img {height:128px;width:auto}

<label>Select image: <input id=i type=file multiple></label><br>