1. 首頁
  2. 問答
  3. HTML 5圖庫拖放

HTML 5圖庫拖放

2012-03-02 160 views
0

Hei， Iam新增html5試圖通過從桌面拖放來創建HTML5圖庫。HTML 5圖庫拖放

這裏是我的代碼

<!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，但我的代碼只適用於一個畫面。我沒有possbility一次拖動所有圖片。任何人都可以指導如何做？

來源

2012-03-02 Somi Meer

+1

的appendChild，不appendChile – 2012-03-03 15:23:03

+0

提高自己的技能 – 2012-08-07 10:57:37

回答

0

如果你需要處理多個文件，顯然你需要遍歷該「文件」變量，而不是隻訪問第一個圖像。

來源

2012-03-03 15:23:58

+0

可以üPLZ如何遍歷 – 2012-03-03 20:11:42

+0

使用的或foreach循環。 – 2012-03-04 13:40:30

0

更改函數以迭代循環，如下面的代碼。

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

看演示，瀏覽器改變了規範webkitGetAsEntry（）

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

來源

2012-08-07 10:50:16

相關問題

 相關問題