上传完成后如何将新文件名作为隐藏表单输入返回到 Dropzone？答案

【问题标题】：How to return new filename to Dropzone after upload is complete as hidden form input?上传完成后如何将新文件名作为隐藏表单输入返回到 Dropzone？
【发布时间】：2014-06-13 11:46:14
【问题描述】：

我目前正在使用 Dropzone 允许用户将一些文件上传到我正在开发的系统中，并将 Dropzone 链接到我的表单中的div，

但是一旦上传完成，我希望将新上传文件的文件名作为hidden 表单输入返回到Dropzone，以便我可以将文件名保存在数据库中。

下面是我使用的代码：

$(document).ready(function(){
    var myDropzone = new Dropzone("div#my-awesome-dropzone", {  
        url: "?content=plg_dropzone&folder=php&file=uploadhandler&alert=yes",
        addRemoveLinks : true,
        acceptedFiles : "application/pdf",
        maxFilesize: 5, // MB
        maxFiles: 5
    });
});

我们将非常感谢您对此提供帮助。我在网上搜索过，没有找到解决办法。

谢谢

【问题讨论】：

标签： php mysql forms dropzone.js

【解决方案1】：

在接受函数中保留一个数组并为其添加文件名。上传成功后，你

var arFiles = [];
var myDropzone = new Dropzone("form#myDropzone", { 
    url: someurl,
uploadMultiple: true,
    accept: function(file, done) {
        var extension = file.name.substring(file.name.lastIndexOf('.')+1);
        //console.log("extension - " + extension + ", arExistingFiles - " + arExistingFiles);
        if (extension == "exe" || extension == "bat") {
            done("Error! File(s) of these type(s) are not accepted.");
        } else if(jQuery.inArray(file.name, arExistingFiles) > -1) {
            arErrorFiles.push(file.name);
            done("File already exists.");
        }else { done(); arFiles.push(file.name) }
    },
})
console.log("arFiles --> " + arFiles);

或

在上传完成的服务器端维护一个全局列表，然后您可以将其发送到数据库。

【讨论】：

【解决方案2】：

我相信使用成功回调和来自服务器的 JSON 响应是最好的方法吗？这对我很有用，希望能有所帮助（我用来防止在上传完成之前提交表单的 fileupload_flag）

我的 Dropzone 配置：

Dropzone.options.myAvatarDropzone = {
    maxFilesize: 3, // MB
    maxFiles: 1,
    addRemoveLinks: true,
    init: function() {
        this.on("addedfile", function(file) { fileupload_flag = 1; });
        this.on("complete", function(file) { fileupload_flag = 0; });
    },
    accept: function(file, done) 
   {
        var re = /(?:\.([^.]+))?$/;
        var ext = re.exec(file.name)[1];
        ext = ext.toUpperCase();
        if ( ext == "JPG" || ext == "JPEG" || ext == "PNG" ||  ext == "GIF" ||  ext == "BMP") 
        {
            done();
        }else { 
            done("Please select only supported picture files."); 
        }
    },
    success: function( file, response ){
         obj = JSON.parse(response);
         alert(obj.filename); // <---- here is your filename
    }
};

我的服务器响应：

$upload_success = $file->move($pubpath.$foldername, $filename);

    $success_message = array( 'success' => 200,
                        'filename' => $pubpath.$foldername.'/'.$filename,
                        );

    if( $upload_success ) {
        return json_encode($success_message);
    } else {
        return Response::json('error', 400);
    }

【讨论】：

感谢@Edwin 您的评论对我帮助很大。我添加了另一个答案，以防像我这样的人需要更多详细信息；）
附加信息：在我的例子中，上传文件$filename的文件名是在服务器上生成的，与原始文件名没有太多共同之处。因此我必须从服务器响应中获取$filename 和$foldername

【解决方案3】：

感谢@edwin Krause 在这方面给了我第一个提示。但是因为我需要对其进行另一次搜索以实际替换预览的来源，所以我在此处添加了我的发现，以供其他不知道该怎么做的人使用。

success: function( file, response ) {
    file.previewElement.querySelector("img").src = response;
}

如果您返回 JSON，我的 PHP 脚本会回显已作为纯 HTML 上传的裁剪图像的名称，您的成功回调可能如下所示

success: function( file, response ) {
    obj = JSON.parse(response);
    file.previewElement.querySelector("img").src = obj.src;
}

或在 Dropzone.js 5.7.2（2020 年 7 月 23 日）中工作的代码版本是：

success: function( file, response ) {
    file.previewElement.querySelector("img").src = response.src;
}

注意： obj.src 或 response.src - src 当然必须匹配您的 json 属性。

您甚至可以将整个 file.previewElement 替换为您的服务器响应

【讨论】：