Question

我目前正在使用 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
    });
});

非常感谢对此的协助。我在网上搜索过但没有得到解决方案。

由于

Answer 1

我相信使用成功回调和来自服务器的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);
    }

Answer 2

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

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

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

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

注意“obj.src” - src必须匹配cause的json属性。

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

Answer 3

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

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);

OR

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

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

3 个答案: