html5拖放文件上傳

我在我的網站上有一堆文件上傳，我正在考慮將它們拖放到拖放字段中。不過，我似乎對他們有問題。html5拖放文件上傳

有什麼辦法可以在不使用javascript或插件的情況下實現拖放系統？我試圖儘可能減少代碼量。

我看過幾種不同的方法，例如http://html5demos.com/dnd-upload，但它們都包含javascript。

目前，我只是普通的輸入看起來像這樣的

<input type="file" multiple="true" name="" value="" />

來源

2014-02-25 zazvorniki

http://stackoverflow.com/questions/14389717/making-drag-and-drop-upload-with-less-javascript –

@JackWilliams我已經RAD這一點。他正在談論創建一個持有人，讓它看起來像一個阿賈克斯拖放。我正在討論創建html5拖放。 – zazvorniki

AFAIK有沒有辦法做到這一點不使用JavaScript。不過，這裏有一個簡單的例子，它使用javascript。如果您將圖像拖放到紅色的div上，它會將圖像附加到身體上。我已經證實它可以在IE11，Chrome 38和Firefox 32中使用。請參閱Html5Rocks文章以獲取更詳細的解釋。

<div id="dropZone" style="width: 100px; height: 100px; background-color: red"></div> 
<script> 
    var dropZone = document.getElementById('dropZone'); 

    // Optional. Show the copy icon when dragging over. Seems to only work for chrome. 
    dropZone.addEventListener('dragover', function(e) { 
     e.stopPropagation(); 
     e.preventDefault(); 
     e.dataTransfer.dropEffect = 'copy'; 
    }); 

    // Get file data on drop 
    dropZone.addEventListener('drop', function(e) { 
     e.stopPropagation(); 
     e.preventDefault(); 
     var files = e.dataTransfer.files; // Array of all files 
     for (var i=0, file; file=files[i]; i++) { 
      if (file.type.match(/image.*/)) { 
       var reader = new FileReader(); 
       reader.onload = function(e2) { 
        var img = document.createElement('img'); 
        img.src= e2.target.result; 
        document.body.appendChild(img); 
       } 
       reader.readAsDataURL(file); 
    } } }); 
</script>

來源

2014-10-27 03:22:31 Dwayne

我實際上能夠解決這個問題，而不使用JavaScript。如果您擴展輸入以填充容器，那麼瀏覽器將負責其餘部分，這對所有瀏覽器都是如此，包括ie。 – zazvorniki

html5拖放文件上傳

回答

相關問題