首页 > 代码库 > html5之拖拽(2)

html5之拖拽(2)

2024-07-23 12:30:26   220人阅读

从本地文件拖拽到浏览器,可以拖动多个文件,并且预览效果

 

在前面的基础上添加的

 1        /*box3*/ 2             box3.ondragover = ondragover; 3             box3.ondrop = function (event) { 4                 event.preventDefault(); 5                 var filesList = event.dataTransfer.files; //读取到的数据集合 6  7                 for (var i = 0; i < filesList.length; i++) { 8                     var fileReader = new FileReader(); //每次都要重新构造才能访问到每个文件 9 10                     showMsg("文件个数:" + filesList.length + "  第几个文件 " + i)11                     var file = filesList[i];12 13                     if (!(file.name.match("jpg") || file.name.match("png") || file.name.match("bmp") || file.name.match("gif"))) {14                         alert("不是一个标准的图像文件!");15                         continue;16                     }17                     fileReader.readAsDataURL(file); //从指定url读入文件18 19                     fileReader.onload = function (e) {  //这个e指向的是当前的fileReader20                         //使用生成添加子节点21                         //var img = document.createElement("img");22                         // img.src = fileReader.result;//23                         //怎么添加指定样式class？24                         //img.style.margin = 10;25                         //event.target.appendChild(img)26 27 28                         //使用嵌入HTML29                         var strHtml = "<img src=http://www.mamicode.com/"" + e.target.result + "\" class=\"boxImg\">";30                         event.target.innerHTML += strHtml;31                     }32 33 34                 }35             }

 

一开始我把 var fileReader = new FileReader(); 

放到了循环之外,导致了 Uncaught InvalidStateError: Failed to execute ‘readAsDataURL‘ on ‘FileReader‘: The object is already busy reading Blobs.
这个FileReader应该对应于每一个读取的文件都需要重新new一个

然后在那个循环处onload时,我用fileReader.result 每次只能拖动显示最后一个,此时的fileReader应该是指向最后一个的fileReader,所以应该用当前每个fileReader对应的对象来调用,所以就用了e.target.result

 

我想这个应该可以实现从本地文件拖动多个文件上传,并且实现预览效果吧,下次再来加工一下

html5之拖拽(2)


联系
我们