拖放文件上傳

我通過使用<input type="file" /> html標記在我的web應用程序中使用文件上傳。我的功能可以很好地從文件選擇器中選擇一個文件並提交文件，但是現在我想通過拖放事件上傳文件，即用戶從他計算機上的某個位置拖動文件，以及何時將文件放入特定位置在我的網頁部分，文件開始上傳。拖放文件上傳

直到現在我設法

function drop(evt) 
    { 
     evt.stopPropogation(); 
      evt.preventDefault(); 

     if (containsFiles(evt)) 
     { 
     var files = evt.dataTransfer.files; 
     var count = files.length; 

     // Only call the handler if 1 or more files was dropped. 
     if (count > 0) 
      // upload files 
     } 
     } 
    }

閱讀從下拉事件的文件，但我怎麼能上傳這些文件？出於安全原因，我無法更改輸入類型=文件的值。那麼我能做些什麼來將這些文件傳遞給我的servlet？

來源

2013-07-29 Bernice

看看http://blueimp.github.io/jQuery-File-Upload/ –

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files –

或者，如果您正在尋找一個支持完善的跨瀏覽器庫，請查看[Fine Uploader]（http://fineuploader.com）。充分披露：我保持優良的上傳。 –

您必須使用FormData（注意IE支持）。

下降時發生，你需要創建FORMDATA對象，並追加數據進去，然後POST形成到您的網址。這是異步方法，並不會重新加載您的網頁。

function drop(evt) { 
    evt.stopPropogation(); 
    evt.preventDefault(); 

    var files = evt.dataTransfer.files; 
    if (files.length > 0) { 
    var form = new FormData(); 

    for(var i = 0; i < files.length; ++i) { 
     var file = evt.dataTransfer.files[i]; 
     form.append('image_' + i, file, file.name); 
    } 

    var req = new XMLHttpRequest(); 
    req.open('POST', '/pathToPostData', true); 
    req.onload = function(evt) { 
     console.log(req.responseText); 
    } 
    req.send(form); 
    } 
}

當心，我已經只在Chrome和Firefox進行了測試，IE9可能不會工作，但IE10應該，如果你測試它，讓我們知道吧。

來源

2013-07-29 16:17:06 moka

不知道爲什麼有人低估了這個答案。這是一個好的開始。謹慎闡述？ –

我在單頁面CMS中使用這種方法來處理類似API的應用程序，它的功能非常出色。關於倒票。請誰做，提供什麼信息和爲什麼？ – moka

感謝@MaksimsMihejevs我剛纔嘗試了這一點，它正在按照我的意願提交我的數據。我現在唯一需要的是使用Ajax，以便我立即刷新頁面，並且用戶可以看到文件已經上傳。 – Bernice

-2

我相信你想要的東西在喜歡到Dropzone.js

我還沒有嘗試過，但它是一個庫，允許對文件的簡單的拖放和拖放到運行它的網站， v3.0不需要使用jQuery。

來源

2013-07-29 16:31:18

拖放文件上傳

回答

相關問題