拖放文件上传

所以我很努力地找到我要找的东西以及如何实现它。拖放文件上传

我有一个基本的PHP文件上传工作，用户按下自定义上传按钮，选择一个文件，然后使用JS，它检查一个变化（即用户选择一个文件），然后提交表单它可以很好地上传图片。

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

这是可能的和现实的？

来源

2013-02-12 Tenatious

这是绝对现实的，可能没有使用任何第三方插件。

下面的代码片段应该给你的是如何工作的一个想法：

拖放区域

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

当然，你可以添加你喜欢希望进度条，预览动画任何额外的...

来源

2013-02-12 15:10:59 wildhaber

你可能可以解释'if（droppedFiles.length> 0 ）{（f = 0; f Tenatious 2013-02-12 15:50:16

@Tenatious我在那里添加了一些评论。但它是一个正常的for-loop，它将删除的文件添加到表单中。 – wildhaber 2013-02-12 16:11:34

啊我明白了。我设法让它上传。谢谢您的帮助！:) – Tenatious 2013-02-12 16:21:49

请查看这个jQuery插件！使用Ajax文件上传和更多如：选择多个文件http://blueimp.github.com/jQuery-File-Upload/

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

来源

2013-02-12 14:41:14 Niels

我有孙中山这个插件，但它只是似乎复杂了什么我想要做？ – Tenatious 2013-02-12 14:42:39

您将定义需要类似这样的东西，因为通过ajax的文件传输不可能没有帮助。例如jqueryform.js http://malsup.com/jquery/form/也有一个用于在航班上传的ajaxForm，非常容易使用http://malsup.com/jquery/form/#ajaxForm – 2013-02-12 14:43:22

如此困惑，从哪里开始xD – Tenatious 2013-02-12 15:06:54

拖放文件上传

回答

相关问题