拖放jQuery Ajax上傳

Question

我需要上傳通過拖放添加的文件，爲此我需要使用jQuery和Ajax。我有一個表單，用戶可以通過瀏覽按鈕選擇文件，但用戶應該可以通過拖放來添加文件。我不想使用插件。

拖放的JavaScript工作，但我不知道如何實際上傳文件（與FileReader的東西？）。這裏是刪除文件的功能（刪除了驗證碼）。

function handleFileSelect(e) { 
    e.stopPropagation(); 
    e.preventDefault(); 

    var files = e.dataTransfer.files; 

    for(var i = 0, f; f = files[i]; i++) { 
     //i display the file name and do validation here 
    } 
} 

我想能夠使用上傳的文件jQuery的.ajax從這裏開始。這可能嗎？

Answer 1

使用FormData通過AJAX上傳文件。

var data = new FormData(); 
... 
data.append('file', files[i]);  
... 
$.ajax({..., data: data, contentType: false, processData: false, type: 'POST', ...}); 

Answer 2

這裏是一個教程如何讀取文件的客戶端：

Drag and Drop

下面是關於如何上傳文件的例子。

html5-file-upload-jquery-php