Drag and Drop jQuery Ajax Upload


Drag and Drop jQuery Ajax Upload

我需要上传通过拖放添加的文件,为此我需要使用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上传文件。这可能吗?

以下是如何读取客户端文件的教程:

拖放

下面是一个关于如何上传文件的示例。

html5文件上传jquery php

使用FormData通过ajax上传文件。

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