IE 不触发ondrop事件

        在用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贴代码真费劲。 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值