php 拖放文件上传
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14835005/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Drag & Drop File Upload
提问by Tenatious
So I'm struggling a bit to find what I'm looking for and how to implement it.
所以我正在努力寻找我正在寻找的东西以及如何实现它。
I have a basic PHP file uploader working, in that a user presses a custom upload button, selects a file and then using JS, it checks for a change (Ie. the user selecting a file) and then submits the form which uploads the image fine.
我有一个基本的 PHP 文件上传器工作，因为用户按下自定义上传按钮，选择一个文件，然后使用 JS，它检查更改（即用户选择文件），然后提交上传图像的表单美好的。
What I also want now is a drag & drop to upload area. So the user can drag an image from their file explorer and drop it in a designated place (not the whole page) and then once that image has been dropped for the form to submit automatically with their image and use the same PHP processing.
我现在还想要的是拖放上传区域。因此，用户可以从他们的文件浏览器中拖动图像并将其放在指定的位置（而不是整个页面），然后一旦该图像被放下，表单就会自动与他们的图像一起提交并使用相同的 PHP 处理。
Is this possible and realistic?
这可能和现实吗？
回答by wildhaber
This is absolutely realistic and possible without using any third parties plugin.
这是绝对现实的，无需使用任何第三方插件即可实现。
The following snippets should give you an idea of how it could work:
以下片段应该让您了解它是如何工作的：
Drop area
掉落区域
$(".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;
});
the processFileUpload()-Method:
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 example
表格示例
<form enctype="multipart/form-data" id="yourregularuploadformId">
<input type="file" name="files[]" multiple="multiple">
</form>
Feel free to use something like this as a starting point. The browser support of this you can find here http://caniuse.com/#feat=xhr2
随意使用这样的东西作为起点。你可以在这里找到浏览器支持http://caniuse.com/#feat=xhr2
Of course you can add any extras you wish like progress bar, preview, animation...
当然，您可以添加任何您想要的附加功能，例如进度条、预览、动画...
