15

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

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

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

这是可能的和现实的吗？

4

1 回答 1

34

在不使用任何第三方插件的情况下，这绝对是现实可行的。

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

放置区

$(".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-12T15:10:59.763 回答