HTML 5圖庫拖放

Question

嘿，我是html5的新手，試圖通過從Desktop拖放創建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

將函數更改為迭代循環，如下面的代碼所示。

              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

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