在用IE10(IE10支持部分html5的FileAPI)写html5测试程序的时候,想实现一个这样的功能:向一个div中拖放图片后,在下方显示这个图片的预览。但是往IE10里拖图片的时候总是不触发ondrop事件,而且图片被拖放后总是跳到另一个页面。要解决这个问题,需要在ondrop之前禁止浏览器的默认处理,因为跳到了下个页面,当然就不会触发ondrop事件了。
解决办法是在ondragover事件加上一句:e.returnValue = false;
预览图片程序如下:
function onload1(){
var dropbox = document.getElementById("dropbox");
if(document.attachEvent){
dropbox.attachEvent("ondragleave", function(e){
dropbox.style.borderColor = 'silver';
});
dropbox.attachEvent("ondragenter", function(e){
dropbox.style.borderColor = 'gray';
dropbox.style.backgroundColor = 'white';
});
dropbox.attachEvent("ondragover", function(e){
dropbox.style.borderColor = 'gray';
dropbox.style.backgroundColor = 'white';
e.returnValue = false;
e.cancelBubble=true;
});
dropbox.attachEvent("ondrop", function(e){
handleFiles(e.dataTransfer.files);
submit.disabled = false;
});
}else{
document.addEventListener("dragenter", function(e){
dropbox.style.borderColor = 'gray';
}, false);
document.addEventListener("dragleave", function(e){
dropbox.style.borderColor = 'silver';
}, false);
dropbox.addEventListener("dragenter", function(e){
dropbox.style.borderColor = 'gray';
dropbox.style.backgroundColor = 'white';
}, false);
dropbox.addEventListener("dragleave", function(e){
dropbox.style.backgroundColor = 'transparent';
}, false);
dropbox.addEventListener("dragenter", function(e){
e.stopPropagation();
e.preventDefault();
}, false);
dropbox.addEventListener("dragover", function(e){
e.stopPropagation();
e.preventDefault();
}, false);
dropbox.addEventListener("drop", function(e){
e.stopPropagation();
e.preventDefault();
alert("begin handle file");
handleFiles(e.dataTransfer.files);
submit.disabled = false;
}, false);
}
}
function handleFiles(files){
for (var i = 0; i < files.length; i++) {
var file = files[i];
var reader = new FileReader();
var content;
reader.onload = function(e){
content = e.target.result;
var oImg = document.getElementById("priview_img");
oImg.src = content;
}
if(file.size > 1024 *1024 * 10){
alert("too large!");
return false;
}
alert(file.slice(0,file.size));
reader.readAsDataURL(file);
}
}
csdn贴代码真费劲。