[英]Dropzone.js - Success message after Upload
I am using Dropzone.js for my file uploading process. 我在文件上传过程中使用了Dropzone.js。 I already found a few topics here on stackoverflow regarding my problem but none of those solutions help me.
我已经在stackoverflow上找到了一些有关我的问题的主题,但是这些解决方案都没有帮助我。
Right now a user can upload multiple files at once at as soon as one file is uploaded, there is a link called "Remove File". 现在,用户可以在一次上传一个文件时立即一次上传多个文件,这里有一个名为“删除文件”的链接。 That´s all!
就这样! What I want is the following:
我想要的是以下内容:
If a user uploads let´s say 4 images than after all those images are uploaded there should be a success message. 如果用户上传了4张图片,那么在上传所有图片之后,应该会显示一条成功消息。 Right now a user does not understand if those files are uploaded for 100%.
现在,用户不知道这些文件是否已100%上传。 I am not good at jQuery/Ajax so I really do not know what my code should look like.
我不擅长jQuery / Ajax,所以我真的不知道我的代码应该是什么样。 Would be great if someone can tell me what my code should look like so that it works.
如果有人可以告诉我我的代码应是什么样的,那么它会起作用,那就太好了。
Here is my form: 这是我的表格:
print "<div class='col-sm-12'><br /><br />";
print "<form method='post' action='index.php' id='dropzone' class='form-horizontal dropzone'>";
print "<input type='hidden' name='func' value='supportticket'>";
print "<input type='hidden' name='id' value='".$id."'>";
print "<input type='hidden' name='sid' value='".$sid."'>";
print "<input type='hidden' name='attach_images' value='".$attach_images."'>";
print "<div class='form-group'>";
print "<div class='col-sm-8'>";
print "<div class='fallback'>";
print "<input name='file' type='file' multiple='' />";
print "</div>";
print "</div>";
print "</div>";
print "</form>";
print "</div>";
Here is my script: 这是我的脚本:
<script type="text/javascript">
jQuery(function($){
try {
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("#dropzone" , {
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 2.0, // MB
addRemoveLinks : true,
dictDefaultMessage :
'<span class="bigger-150 bolder"><i class="ace-icon fa fa-caret-right red"></i> Drop files</span> to upload \
<span class="smaller-80 grey">(or click)</span> <br /> \
<i class="upload-icon ace-icon fa fa-cloud-upload blue fa-3x"></i>',
dictResponseError: 'Error while uploading file!',
//change the previewTemplate to use Bootstrap progress bars
previewTemplate: "<div class=\"col-sm-4\"><div class=\"dz-preview dz-file-preview\">\n <div class=\"dz-details\">\n <div class=\"dz-filename\"><span data-dz-name></span></div>\n <div class=\"dz-size\" data-dz-size></div>\n <img data-dz-thumbnail />\n </div>\n <div class=\"progress progress-small progress-striped active\"><div class=\"progress-bar progress-bar-success\" data-dz-uploadprogress><br /></div></div>\n</div>\n <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n</div></div>"
});
$(document).one('ajaxloadstart.page', function(e) {
try {
myDropzone.destroy();
} catch(e) {}
});
} catch(e) {
alert('Dropzone.js does not support older browsers!');
}
});
</script>
NOTICE: Upload is working fine currently! 注意:目前上传工作正常! All images are uploaded to my server and I also wrote a script so that the name of my file will be saved inside my database.
所有图像都上传到我的服务器,并且我还编写了一个脚本,以便将文件名保存在数据库中。 The only thing I need is to extend my script so that I get a success message if an upload was successfull.
我唯一需要做的就是扩展脚本,以便在上传成功后获得成功消息。
Hope that someone can help me out! 希望有人可以帮助我!
EDIT: Here is my current code. 编辑:这是我当前的代码。 Upload is still working fine, but no success message after all files are uploaded.
上载仍然可以正常工作,但是在上载所有文件后没有成功消息。
<script type="text/javascript">
jQuery(function($){
try {
Dropzone.autoDiscover = false;
var errors = false;
var myDropzone = new Dropzone("#dropzone" , {
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 2.0, // MB
error: function(file, errorMessage) {
errors = true;
},
queuecomplete: function() {
if(errors) alert("There were errors!");
else alert("We're done!");
},
addRemoveLinks : true,
dictDefaultMessage :
'<span class="bigger-150 bolder"><i class="ace-icon fa fa-caret-right red"></i> Drop files</span> to upload \
<span class="smaller-80 grey">(or click)</span> <br /> \
<i class="upload-icon ace-icon fa fa-cloud-upload blue fa-3x"></i>',
dictResponseError: 'Error while uploading file!',
//change the previewTemplate to use Bootstrap progress bars
previewTemplate: "<div class=\"col-sm-4\"><div class=\"dz-preview dz-file-preview\">\n <div class=\"dz-details\">\n <div class=\"dz-filename\"><span data-dz-name></span></div>\n <div class=\"dz-size\" data-dz-size></div>\n <img data-dz-thumbnail />\n </div>\n <div class=\"progress progress-small progress-striped active\"><div class=\"progress-bar progress-bar-success\" data-dz-uploadprogress><br /></div></div>\n</div>\n <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n<span data-dz-suc>successfull</span></div></div>"
});
$(document).one('ajaxloadstart.page', function(e) {
try {
myDropzone.destroy();
} catch(e) {}
});
} catch(e) {
alert('Dropzone.js does not support older browsers!');
}
});
</script>
Thanks, Chris 谢谢克里斯
Try with this, write your success code as follows, 试试看,如下编写您的成功代码,
success:function(file, response)
{
// Do what you want to do with your response
// This return statement is necessary to remove progress bar after uploading.
return file.previewElement.classList.add("dz-success");
}
You can refer the link, http://www.dropzonejs.com/#event-success for more details. 您可以参考链接http://www.dropzonejs.com/#event-success以获得更多详细信息。
Here is how I do it, with a combination of the error
handler and queuecomplete
: 这是我的方法,结合了
error
处理程序和queuecomplete
:
var errors = false;
var myDropzone = new Dropzone("#dropzone" , {
...
error: function(file, errorMessage) {
errors = true;
},
queuecomplete: function() {
if(errors) alert("There were errors!");
else alert("We're done!");
}
I had a problem similar to yours, so here is my code, i hope it can help you 我遇到了与您类似的问题,所以这是我的代码,希望它可以为您
Dropzone.options.UploadForm = {
method: "post",
uploadMultiple: true,
acceptedFiles: ".csv",
autoProcessQueue: false,
init: function () {
myDropzone = this;
var submitButton = document.querySelector("#submit-all");
var removeButton = document.querySelector("#remove-all");
submitButton.addEventListener("click", function () {
myDropzone.processQueue(); // Tell Dropzone to process all queued files.
});
removeButton.addEventListener("click", function () {
myDropzone.removeAllFiles();
submitButton.removeAttribute("disabled");
});
this.on("addedfile", function (file) {
});
this.on("sendingmultiple", function (file) {
// And disable the start button
submitButton.setAttribute("disabled", "disabled");
});
this.on("completemultiple", function (file) {
if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
submitButton.removeAttribute("disabled");
}
});
this.on("successmultiple", function (file, response) {
console.log(response);
$(response).each(function (index, element) {
if (element.status) {
$("body").prepend('<div class="alert alert-success alert-dismissable">' +
'<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>' +
'<strong>Success! </strong> ' + element.fileName + ' was uploaded successfully</div>');
}
else {
$("body").prepend('<div class="alert alert-danger alert-dismissable">' +
'<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>' +
'<strong>Error!</strong> ' + element.message + '</div >');
}
});
submitButton.removeAttribute("disabled");
});
this.on("error", function (file, errorMessage) {
$("body").prepend('<div class="alert alert-danger alert-dismissable">' +
'<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>' +
'<strong>Error!</strong> ' + errorMessage + '</div >');
submitButton.removeAttribute("disabled");
});
}
};
sendingmultiple,completemultiple and successmultiple are made for multiple file upload. sendmultiple,completemultiple和successmultiple用于上传多个文件。
Does this help? 这有帮助吗?
Dropzone.options.myDropzone = {
init: function() {
this.on("success", function(file, responseText) {
//
});
}
};
This link might be helpful as well: https://github.com/enyo/dropzone/issues/244 该链接也可能会有所帮助: https : //github.com/enyo/dropzone/issues/244
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.