Javascript 提交表单后重新初始化/重置 dropzone
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31380478/
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
Reinitialize/Reset dropzone after form is submitted
提问by Bibek Sharma
I'm using the dropzone.jsto upload image on ruby on rails .Here is my HTML code
我正在使用dropzone.js在 ruby on rails 上上传图像。这是我的 HTML 代码
<div class="row">
<div class="col-md-12" id="drop-zone-container">
<%= form_tag '/settlement_proofs', method: :post, class: 'dropzone form', id: 'media-dropzone' do %>
<div class="fallback">
<%= file_field_tag 'attachment', multiple: true%>
</div>
<% end %>
</div>
</div>
and I initialized dropzone as
我将 dropzone 初始化为
$("#media-dropzone").dropzone({
acceptedFiles: pg.constants.ACCEPTED_FORMAT,
maxFilesize: pg.constants.ATTACHMENT_MAX_FILE_SIZE, //In MB
maxFiles: pg.constants.ATTACHMENT_MAX_SIZE,
addRemoveLinks: true,
removedfile: function (file) {
if (file.xhr.responseText.length > 0) {
var fileId = JSON.parse(file.xhr.responseText).id;
$.ajax({
url: pg.constants.url.SETTLEMENT_BASE_URL + fileId,
method: 'DELETE',
dataType: "json",
success: function (result) {
$('#uploaded_attachment').val($("#uploaded_attachment").val().replace(result.id + ',', ""));
$('#settlement_proof_status span').fadeOut(0);
var _ref;
return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
},
error: function () {
$('#settlement_proof_status').text(I18n.t('attachment_deletion_error')).fadeIn();
}
});
}
},
init: function () {
this.on("success", function (file, message) {
debugger;
appendContent(message.attachment.url, message.id);
});
this.on("error", function (file, message) {
$('#settlement_proof_status span').text(message).fadeIn();
var _ref;
return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
});
$('#settlement_invoice_submit_btn').click(function () {
$("#new_settlement_invoice").submit();
});
$('#uploaded_attachment').change(function () {
if (this.value.length == 0) {
this.removeAllFiles();
}
});
}
});
After I submit the form through AJAX, I need the dropzone field to reset with the default image.
通过 AJAX 提交表单后，我需要使用默认图像重置 dropzone 字段。
采纳答案by Bibek Sharma
Finally, I solved the issue myself. At first I remove the form from its parents element.It removed the existing dropzone instance.Then I create the form using the jQuery and reinitialize the dropzone again. Here is my complete code
最后，我自己解决了这个问题。首先，我从其父元素中删除表单。它删除了现有的 dropzone 实例。然后我使用 jQuery 创建表单并再次重新初始化 dropzone。这是我的完整代码
// To reset dropzone before popup load
var resetDropzone = function () {
$('#drop-zone-container').empty();
var $form = makeElement('form', {
action: window.pg.constants.url.SETTLEMENT_BASE_URL,
method: 'post',
id: 'settlement-proof-form',
class: 'dropzone'
});
$('#drop-zone-container').append($form);
var settlmentProofDropZone;
$("#settlement-proof-form").dropzone({
acceptedFiles: pg.constants.ACCEPTED_FORMAT,
maxFilesize: pg.constants.ATTACHMENT_MAX_FILE_SIZE, //In MB
maxFiles: pg.constants.ATTACHMENT_MAX_SIZE,
addRemoveLinks: true,
removedfile: function (file) {
if (file.xhr.responseText.length > 0) {
var fileId = JSON.parse(file.xhr.responseText).id;
$.ajax({
url: pg.constants.url.SETTLEMENT_BASE_URL + fileId,
method: 'DELETE',
dataType: "json",
success: function (result) {
$('#uploaded_attachment').val($("#uploaded_attachment").val().replace(result.id + ',', ""));
$('#settlement_proof_status span').fadeOut(0);
var _ref;
return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
},
error: function () {
$('#settlement_proof_status').text(I18n.t('attachment_deletion_error')).fadeIn();
}
});
}
},
init: function () {
settlmentProofDropZone = this;
this.on("success", function (file, message) {
appendContent(message.attachment.url, message.id);
});
}
});
};
function makeElement(element, options) {
var $formField = document.createElement(element);
$.each(options, function (key, value) {
if (key === 'innerHTML') {
$formField.innerHTML = value;
}
else {
$formField.setAttribute(key, value);
}
});
return $formField;
}
});
回答by J Santosh
this.on("complete", function(file) {
this.removeAllFiles(true);
})
write the above code in INITfunction.
把上面的代码写在INIT函数里。
this removes all files in dropzone and RESETS the dropzone to initial state.
这将删除 dropzone 中的所有文件并将 dropzone 重置为初始状态。
回答by Senug Nam Kim
Try this:
尝试这个：
//DropZone Initiation Section
init: function() {
this.on('success', function(file, json) {
});
this.on('addedfile', function(file) {
});
this.on('drop', function(file) {
});
this.on('removedfile', function(file) {
});
this.on('complete', function(file) {
});
this.on('error', function(file) {
});
this.on('resetFiles', function() {
if(this.files.length != 0){
for(i=0; i<this.files.length; i++){
this.files[i].previewElement.remove();
}
this.files.length = 0;
}
});
}
function JS_ClearDropZone() {
//DropZone Object Get
var objDZ = Dropzone.forElement("div#objDropzone");
//"resetFiles" Event Call
objDZ.emit("resetFiles");
}
回答by Scott
Every answer here is incredibly complicated. I have a dropzone in a modal with some ajax to draw the uploaded/complete file on the page. If the user adds ANOTHER image to the gallery, I wanted to reset the dropzone in that modal without refreshing the page. The answer? See my solution here https://stackoverflow.com/a/45247184/179571
这里的每个答案都非常复杂。我在模态中有一个 dropzone，带有一些 ajax 来在页面上绘制上传/完整的文件。如果用户将另一个图像添加到图库，我想在不刷新页面的情况下重置该模式中的放置区。答案？在此处查看我的解决方案https://stackoverflow.com/a/45247184/179571
回答by JacobRossDev
I took an example from both Senug Nam Kim and J Santosh:
我从 Senug Nam Kim 和 J Santosh 那里拿了一个例子：
// Where .reset-dz is the class of a button
$('.reset-dz').on('click', function(e){
var myDropzone = Dropzone.forElement("#user-post-submit");
myDropzone.removeAllFiles(true);
});
回答by Ivan Pirus
A simple solution built on script. For version 5.4.0
基于脚本的简单解决方案。对于 5.4.0 版
- Add it in you script what connect dropzone.js
- 将它添加到你的脚本中什么连接 dropzone.js
$('button#submit_button').click(function () { $('.dz-preview').empty(); $('.dz-message').show(); });
$('button#submit_button').click(function () { $('.dz-preview').empty(); $('.dz-message').show(); });
And in dropzone.js add line >>> $('.dz-message').hide();
before return _this3.updateTotalUploadProgress(); (line 1277)
在 dropzone.js 中添加行 >>> $('.dz-message').hide();
在返回 _this3.updateTotalUploadProgress() 之前；（第 1277 行）
this.on("uploadprogress", function () { $('.dz-message').hide(); return _this3.updateTotalUploadProgress(); });
this.on("uploadprogress", function () { $('.dz-message').hide(); return _this3.updateTotalUploadProgress(); });
