HTML 5图库拖放

Question

Hei, Iam new to html5 trying to create HTML5 gallery by dragging and dropping from Desktop . 嘿，我是html5的新手，试图通过从Desktop拖放创建HTML5画廊。

Here is my code 这是我的代码

 <!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>

I want to create the just image gallery not other files like excel, word but my code just works for one picture . 我想创建公正的图片库，而不是像excel，word这样的其他文件，但是我的代码仅适用于一张图片。 i dont have possbility to drag all pictures at once .Can anyone guide how to do ?? 我无法一次拖动所有图片。任何人都可以指导操作方法吗？

Answer 1

Change the function to iterate loop like below code. 将函数更改为迭代循环，如下面的代码所示。

              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);
                   }
                }

Look at the demo, Chrome changed the specification to webkitGetAsEntry() 查看演示，Chrome将规范更改为webkitGetAsEntry（）

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

Answer 2

如果您需要处理多个文件，显然您需要遍历“ files”变量，而不是仅访问第一个图像。

HTML 5图库拖放

问题描述

2 个解决方案

解决方案1
0 2012-08-07 10:50:16

解决方案2
0 2012-03-03 15:23:58

HTML 5图库拖放

问题描述

2 个解决方案

解决方案1 0 2012-08-07 10:50:16

解决方案2 0 2012-03-03 15:23:58

解决方案1
0 2012-08-07 10:50:16

解决方案2
0 2012-03-03 15:23:58