我正在使用 html5 创建拖放图像上传功能。这在 Firefox 中对我来说非常有用,但在 chrome 中图像 onload 事件仅在第一次触发。如果我只在第一个作品中拖动多个图像,而如果我在其中拖动第二个图像,则会失败。我相信问题出在图像加载上。
这是我的代码的工作方式,我删除了不相关的部分:
var img = document.createElement("img");
var reader = new FileReader();
var canvas = document.createElement("canvas");
var canvasData;
var ctx = canvas.getContext("2d");
var myFiles;
var i = 0;
reader.onload = (function (aImg)
{
return function (e)
{
aImg.src = e.target.result;
};
})(img);
img.onload = function (){
//resizes image
//draws it to the canvas
//posts to server
i++;
if(i < myFiles.length){
processNext(i);
}
}
function processNext(filei) {
var file = myFiles[filei];
img.file = file;
reader.readAsDataURL(file);
}
i = 0;
myFiles = files;
processNext(0);
有谁知道为什么这在 Firefox 中有效但在 Chrome 中无效?
铬追踪器的解释:
这不是一个错误。 WebKit 只是更加严格。您必须在替换之前实例化一个新的 Image() 对象,如下所示:
var photo = document.getElementById('image_id');
var img = new Image();
img.addEventListener('load', myFunction, false);
img.src = 'http://newimgsource.jpg';
photo.src = img.src;
source: http://code.google.com/p/chromium/issues/detail?id=7731#c12 http://code.google.com/p/chromium/issues/detail?id=7731#c12
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)