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!
这是我的代码。它在Chrome上工作正常但在IE上却太慢了。我试过使用javascript而不是jquery但没有改变！
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
每个人都说innerHTML比追加更快。但是当我使用innerHTML而不是追加时，一切都没有改变。我真的需要一些建议。谢谢
<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'>×</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!");
}
}
});
1 个解决方案
#1
4
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.
长时间的原因是二进制数据必须被转换，编码（FileReader.readAsDataURL（））和解码（Image）到字符串格式（这里：Base-64），这在IE中很慢。保持“过程链”二进制将显着加快处理速度。
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.
因此，请将Blob与Blob-URL一起使用。这将更快地工作，并在所有浏览器中使用更少的内存，包括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>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>#1
4
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.
长时间的原因是二进制数据必须被转换，编码（FileReader.readAsDataURL（））和解码（Image）到字符串格式（这里：Base-64），这在IE中很慢。保持“过程链”二进制将显着加快处理速度。
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.
因此，请将Blob与Blob-URL一起使用。这将更快地工作，并在所有浏览器中使用更少的内存，包括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>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>