这绝对是现实的,并且无需使用任何第三方插件即可实现。
以下片段应该可以让您了解它是如何工作的:
掉落区域
$(".drop-files-container").bind("drop", function(e) {
var files = e.originalEvent.dataTransfer.files;
processFileUpload(files);
// forward the file object to your ajax upload method
return false;
});
processFileUpload() 方法:
function processFileUpload(droppedFiles) {
// add your files to the regular upload form
var uploadFormData = new FormData($("#yourregularuploadformId")[0]);
if(droppedFiles.length > 0) { // checks if any files were dropped
for(var f = 0; f < droppedFiles.length; f++) { // for-loop for each file dropped
uploadFormData.append("files[]",droppedFiles[f]); // adding every file to the form so you could upload multiple files
}
}
// the final ajax call
$.ajax({
url : "upload.php", // use your target
type : "POST",
data : uploadFormData,
cache : false,
contentType : false,
processData : false,
success : function(ret) {
// callback function
}
});
}
表格示例
<form enctype="multipart/form-data" id="yourregularuploadformId">
<input type="file" name="files[]" multiple="multiple">
</form>
请随意使用类似的内容作为起点。您可以在这里找到对此的浏览器支持http://caniuse.com/#feat=xhr2 http://caniuse.com/#feat=xhr2
当然,您可以添加任何您想要的附加功能,例如进度条、预览、动画......