图片上传预览在 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

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

所以请改用Blobs 和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>