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

Posted

技术标签:

【中文标题】上传完成后如何将新文件名作为隐藏表单输入返回到 Dropzone?【英文标题】:How to return new filename to Dropzone after upload is complete as hidden form input? 【发布时间】: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
    );
);

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

谢谢

【问题讨论】:

【参考方案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.srcresponse.src - src 当然必须匹配您的 json 属性。

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

【讨论】:

以上是关于上传完成后如何将新文件名作为隐藏表单输入返回到 Dropzone?的主要内容,如果未能解决你的问题,请参考以下文章

通过表单上传文件后如何清除输入字段

如何从父文档中捕获 iframe 内部的刷新?

添加到 innerHTML 而不破坏表单内容

Angularjs如何上传多部分表单数据和文件?

在表单发布完成对目标执行文件上传后,从 iframe 获取数据

带有文件上传的 Rails 3 多步骤表单