拖曳删除文件上传 [英] Drag & Drop File Upload

问题描述

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

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

这是否可能和现实？

解决方案

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

以下代码段应该提供一个如何工作的想法：

放置区域

  $（。drop-files-container）bind（drop ，function（e）{
 var files = e.originalEvent.dataTransfer.files; 
 processFileUpload（files）; 
 //将文件对象转发到您的ajax上传方法
 return false; 
}）; 
  

processFileUpload（） - 方法：

 函数processFileUpload（droppedFiles）{
 //将您的文件添加到常规上载表单
 var uploadFormData = new FormData（$（ #yourregularuploadformId）[0]）; 
 if（droppedFiles.length> 0）{//检查是否有任何文件丢失
 for（var f = 0; f< droppedFiles.length; f ++）{// for-loop for each文件丢失
 uploadFormData.append（files []，droppedFiles [f]）; //将每个文件添加到表单中，以便您可以上传多个文件
} 
} 
 
 //最终的ajax调用
 
 $ .ajax（ {
 url：upload.php，//使用您的目标
类型：POST，
 data：uploadFormData，
 cache：false，
 contentType： false，
 processData：false，
 success：function（ret）{
 //回调函数
} 
}）; 
 
} 
  

表单示例

 < form enctype =multipart / form-dataid =yourregularuploadformId> 
< input type =filename =files []multiple =multiple> 
< / form> 
  

随意使用像这样的起点。浏览器支持您可以在这里找到 http://caniuse.com/#feat=xhr2

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

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.

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.

Is this possible and realistic?

解决方案

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:

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

Of course you can add any extras you wish like progress bar, preview, animation...

这篇关于拖曳删除文件上传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！