上传完成后如何将新文件名作为隐藏表单输入返回到 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.src
或 response.src
- src
当然必须匹配您的 json 属性。
您甚至可以将整个 file.previewElement
替换为您的服务器响应
【讨论】:
以上是关于上传完成后如何将新文件名作为隐藏表单输入返回到 Dropzone?的主要内容,如果未能解决你的问题,请参考以下文章