拖放文件上传

所以我正在努力寻找我正在寻找的东西以及如何实现它。

我有一个基本的PHP文件上传工作，用户按下自定义上传按钮，选择一个文件，然后使用JS，它检查更改（即用户选择文件），然后提交上传图像的表单精细。

我现在想要的是拖放上传区域。 因此，用户可以从文件浏览器中拖动图像并将其放在指定位置（而不是整个页面），然后删除该图像后，表单将自动与其图像一起提交并使用相同的PHP处理。

这可能和现实吗？

Answer 1

这是绝对现实的，可以不使用任何第三方插件。

以下片段应该让您了解它是如何工作的：

掉落区域

$(".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 } }); } 

forms的例子

随意使用这样的东西作为起点。 您可以在此处找到浏览器支持http://caniuse.com/#feat=xhr2

当然你可以添加你想要的任何额外的东西，如进度条，预览，动画......

Answer 2

请查看这个jQuery插件！ 使用Ajax文件上传等： http ： //blueimp.github.com/jQuery-File-Upload/

文件上载小部件，具有多个文件选择，拖放支持，进度条和jQuery的预览图像。 支持跨域，分块和可恢复文件上传以及客户端图像大小调整。 适用于支持标准HTML表单文件上载的任何服务器端平台（PHP，Python，Ruby on Rails，Java，Node.js，Go等）。