html5之拖拽(2)

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

在前面的基础上添加的

       /*box3*/
            box3.ondragover = ondragover;
            box3.ondrop = function (event) {
                event.preventDefault();
                var filesList = event.dataTransfer.files; //读取到的数据集合

                for (var i = 0; i < filesList.length; i++) {
                    var fileReader = new FileReader(); //每次都要重新构造才能访问到每个文件

                    showMsg("文件个数:" + filesList.length + "  第几个文件 " + i)
                    var file = filesList[i];

                    if (!(file.name.match("jpg") || file.name.match("png") || file.name.match("bmp") || file.name.match("gif"))) {
                        alert("不是一个标准的图像文件!");
                        continue;
                    }
                    fileReader.readAsDataURL(file); //从指定url读入文件

                    fileReader.onload = function (e) {  //这个e指向的是当前的fileReader
                        //使用生成添加子节点
                        //var img = document.createElement("img");
                        // img.src = fileReader.result;//
                        //怎么添加指定样式class？
                        //img.style.margin = 10;
                        //event.target.appendChild(img)


                        //使用嵌入HTML
                        var strHtml = "<img src="" + e.target.result + "" class="boxImg">";
                        event.target.innerHTML += strHtml;
                    }


                }
            }

一开始我把 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

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