Question

平，我是html5的新手，试图通过从桌面拖放来创建HTML5库。

这是我的代码

 <!DOCTYPE html>
  <html>
 <head>
 <script>
            function doDrop(event){
                    var files = event.dataTransfer.files;
                    img.src = files[0].getAsDataURL();
                    document.body.appendChild(img);
                }
            </script>
            </head>
            <body>
                <div style="border:1px solid black; with:100px; height:100px" 
                    ondragover="event.stopPropagnation(); event.preventDefault();"
                    ondrop="event.stopPropagnation(); event.preventDefault(); doDrop(event);"
                ></div>
            </body>
            </html>

我想创建正好的图片库而不是其他文件，如excel，word，但我的代码只适用于一张图片。我没有可能一次拖动所有图片。任何人都可以指导怎么做？

Answer 1

如果你需要处理多个文件，显然你需要遍历那些＆＃34;文件＆＃34;变量，而不是仅访问第一个图像。

Answer 2

将函数更改为迭代循环，如下面的代码。

              function doDrop(){
                    var files = event.dataTransfer.files;
                  for(var i=0;i<files.length;i++){
                    var img=document.createElement('img');
                    img.src = files[i].getAsDataURL(); // You may also use createObjectURL
                    document.body.appendChild(img);
                   }
                }

观看演示，Chrome将规范更改为webkitGetAsEntry（）

http://html5-demos.appspot.com/static/dnd/all_types_of_import.html

HTML 5库拖放

2 个答案: