html5之拖拽(2)

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

在前面的基础上添加的

 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指向的是当前的fileReader
20                         //使用生成添加子节点
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                         //使用嵌入HTML
29                         var strHtml = "<img src=\"" + 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

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