Image Upload Preview is Too Slow on IE

Question

Here is my code. It works fine on Chrome but it's too slow on IE. I've tried to use the javascript instead of jquery but nothing changed!

Everyone says that innerHTML is faster than append. But when i use innerHTML instead of append, nothing has changed. I really need some advice. Thanks

 <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

The reason for the long time is that the binary data has to be converted, encoded (FileReader.readAsDataURL()) and decoded (Image) to and from string format (here: Base-64), which is slow in IE. Keeping the "chain of process" binary will speed up processing significantly.

So use Blobs together with Blob-URLs instead. This will work faster and use less memory in all browsers, including IE. This also eliminates the FileReader as we can use the File object directly as that is just a sub-class of a 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>

Apply as needed to your scenario.

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>