我在 Dropzonejs 上遇到了一个小问题。
我有此代码:
Dropzone.options.dpzMultipleFiles = {
dictDefaultMessage: "Przeciągnij pliki aby dodać",
uploadMultiple: true,
paramName: "file",
maxFilesize: 50,
maxFiles: 15,
createImageThumbnails: true,
acceptedFiles: ".png,.jpg,.jpeg",
clickable: true,
thumbnailWidth: 200,
thumbnailHeight: 200,
autoProcessQueue: true,
init: function () {
dpzMultipleFiles = this;
$.ajax({
url: '{{ pageTemplate.pageHeader.baseHref }}/SystemConfiguration/ShowFiles',
type: 'get',
dataType: 'json',
cache: false,
success: function (response) {
$.each(response, function (key, value) {
dpzMultipleFiles.options.maxFiles = dpzMultipleFiles.options.maxFiles - 1;
var mockFile = {name: value.name, size: value.size}
dpzMultipleFiles.emit('addedfile', mockFile)
dpzMultipleFiles.emit('thumbnail', mockFile, value.path)
dpzMultipleFiles.emit('complete', mockFile)
})
},
error: function (response) {
alert('Nastąpił problem z JSON. Proszę o kontakt z administratorem serwisu.');
}
});
this.on('completemultiple', function (file, json) {
//$('.sortable').sortable('enable');
});
this.on("thumbnail", function (file, dataUrl) {
$('.dz-image').last().find('img').attr({width: '100%', height: '100%'});
}),
this.on('success', function (file, json) {
if (file.accepted == true) {
$('.dz-preview').remove();
this.removeAllFiles;
}
});
this.on('successmultiple', function () {
$('.dz-preview').remove()
$.ajax({
url: '{{ pageTemplate.pageHeader.baseHref }}/SystemConfiguration/ShowFiles',
type: 'get',
dataType: 'json',
cache: false,
success: function (response) {
$.each(response, function (key, value) {
var mockFile = {name: value.name, size: value.size}
dpzMultipleFiles.emit('addedfile', mockFile)
dpzMultipleFiles.emit('thumbnail', mockFile, value.path)
dpzMultipleFiles.emit('complete', mockFile)
});
}
,
error: function (response) {
alert('Nastąpił problem z JSON. Proszę o kontakt z administratorem serwisu.');
}
});
})
this.on("addedfile", function (file) {
var removeButton = Dropzone.createElement("<button class='remove_file_dropzone'> Skasuj plik </button>");
removeButton.addEventListener("click", function (e) {
e.preventDefault();
e.stopPropagation();
$.ajax({
url: '{{ pageTemplate.pageHeader.baseHref }}/SystemConfiguration/RemoveFile/' + file.name,
dataType: 'text',
type: 'post',
cache: false,
data: $(this).serialize(),
success: function (data, textStatus, jQxhr) {
x = confirm('Czy napewno chcesz skasować ten plik?');
if (!x) return false;
dpzMultipleFiles.options.maxFiles = dpzMultipleFiles.options.maxFiles + 1;
$('.dz-preview').remove();
this.removeAllFiles;
$.ajax({
url: '{{ pageTemplate.pageHeader.baseHref }}/SystemConfiguration/ShowFiles',
type: 'get',
dataType: 'json',
cache: false,
success: function (response) {
$.each(response, function (key, value) {
var mockFile = {name: value.name, size: value.size}
dpzMultipleFiles.emit('addedfile', mockFile)
dpzMultipleFiles.emit('thumbnail', mockFile, value.path)
dpzMultipleFiles.emit('complete', mockFile)
});
}
,
error: function (response) {
alert('Nastąpił problem z JSON. Proszę o kontakt z administratorem serwisu.');
}
});
}, error: function (jqXhr, textStatus, errorThrown) {
alert('Nastąpił problem z JSON. Proszę o kontakt z administratorem serwisu.');
}
});
});
file.previewElement.appendChild(removeButton);
});
this.on("maxfilesexceeded", function (file) {
this.removeFile(file);
});
this.on('resetFiles', function () {
dpzMultipleFiles.removeAllFiles();
});
this.on('queuecomplete', function () {
//$('.dz-preview').remove();
});
this.on('drop', function () {
});
this.on('complete', function () {
});
}
};
$(function () {
$(".dropzone").sortable({
items: '.dz-preview',
cursor: 'move',
opacity: 0.5,
containment: '.dropzone',
distance: 20,
tolerance: 'pointer',
update: function (event, ui) {
$(".dz-filename span").each(function (index) {
$.ajax({
url: '{{ pageTemplate.pageHeader.baseHref }}/SystemConfiguration/ChangeFileOrder/' + $(this).text() + "/" + index,
dataType: 'text',
type: 'post',
cache: false,
data: $(this).serialize(),
success: function (data, textStatus, jQxhr) {
}, error: function (jqXhr, textStatus, errorThrown) {
alert('Nastąpił problem z JSON. Proszę o kontakt z administratorem serwisu.');
}
});
});
}
});
});
该脚本正常工作100%:) 唯一的问题是刷新文件。文件列表在上传100%完成之前刷新了我。
我希望在完整上传所有文件后(而不是之前)刷新文件列表。
有人知道如何改进我的代码吗?