Javascript Dropzone.js - 上传后的成功消息
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32481177/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dropzone.js - Success message after Upload
提问by Christoph C.
I am using Dropzone.js for my file uploading process. I already found a few topics here on stackoverflow regarding my problem but none of those solutions help me.
我在文件上传过程中使用 Dropzone.js。我已经在 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. Right now a user does not understand if those files are uploaded for 100%. I am not good at jQuery/Ajax so I really do not know what my code should look like. Would be great if someone can tell me what my code should look like so that it works.
如果用户上传了 4 张图片，那么在所有这些图片都上传之后，应该会出现一条成功消息。现在，用户不知道这些文件是否已 100% 上传。我不擅长 jQuery/Ajax，所以我真的不知道我的代码应该是什么样子。如果有人能告诉我我的代码应该是什么样子才能工作，那就太好了。
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
谢谢，克里斯
回答by UC_SUJITH
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-successfor more details.
您可以参考链接 http://www.dropzonejs.com/#event-success了解更多详细信息。
回答by JustHelping
Here is how I do it, with a combination of the errorhandler 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!");
}
回答by Muhammed Fatih G?l
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
回答by Alexandre Ribeiro
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 用于多个文件上传。
