Javascript HTML5多媒体资料拖放_Javascript_Html_Drag And Drop

Javascript HTML5多媒体资料拖放

javascript html

Javascript HTML5多媒体资料拖放,javascript,html,drag-and-drop,Javascript,Html,Drag And Drop,嘿嘿,，我是html5新手，尝试通过从桌面拖放来创建html5图库这是我的密码 <!DOCTYPE html> <html> <head> <script> function doDrop(event){ var files = event.dataTransfer.files; img.src = files[0].getAsDa

嘿嘿,，我是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>


功能doDrop（事件）{
var files=event.dataTransfer.files；
img.src=文件[0]。getAsDataURL（）；
文件.正文.附件（img）；
}

我想创建just image gallery，而不是excel、word等其他文件，但我的代码只适用于一张图片。我不可能一次拖动所有图片。有人能指导怎么做吗

如果需要处理多个文件，显然需要迭代该“files”变量，而不是只访问第一个图像。

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

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

函数doDrop（）{
var files=event.dataTransfer.files；
对于（var i=0；i