动态更改拖放区最大文件数

Question

每次上传/删除新图像时，我都尝试动态更新MaxFiles属性。 通过使用以下代码，它不允许上传任何图像，而是将其限制为 maxFiles。它不是取变量的值maxFile，但是当我删除maxFile变量并输入一个数字时，它可以正常工作。 从这个答案中得到了源代码的想法。

!function ($) {
"use strict";
var Onyx = Onyx || {};

Onyx = {
init: function() {
var self = this,
obj;
for (obj in self) {
if ( self.hasOwnProperty(obj)) {
var _method =  self[obj];
if ( _method.selector !== undefined && _method.init !== undefined ) {
if ( $(_method.selector).length > 0 ) {
_method.init();
}
}
}
}
},
userFilesDropzone: {
selector: 'form.dropzone',
init: function() {
var base = this,
container = $(base.selector);
base.initFileUploader(base, 'form.dropzone');
},
initFileUploader: function(base, target) {
var maxFile = $('.dropzone').attr('data-count');
var onyxDropzone = new Dropzone(target, {
url: ($(target).attr("action")) ? $(target).attr("action") : "data.php", // Check that our form has an action attr and if not, set one here
maxFiles: maxFile, 
maxFilesize: 5,
acceptedFiles: ".JPG,.PNG,.JPEG",
//  previewTemplate: previewTemplate,
//  previewsContainer: "#previews",
clickable: true,
uploadMultiple: false,
});
onyxDropzone.on("success", function(file, response) {
let parsedResponse = JSON.parse(response);
file.upload_ticket = parsedResponse.file_link;
var imagecount = $('.dropzone').attr('data-count');
imagecount = imagecount - 1;
$('.dropzone').attr('data-count', imagecount);
});
},
}
}
}// JavaScript Document
function openImagePopup(id = null) {
$(".upload-images").show();
$.ajax({
url: 'fetch.php',
type: 'post',
data: {id: id},
dataType: 'json',
success:function(response) {
var imagecount = response.counts;
$('.dropzone').attr('data-count', imagecount);
}
});
}  

.HTML

<form action="data.php" class="dropzone files-container" data-count="">
<div class="fallback">
<input name="file" type="file" multiple />
</div>
<input type="hidden" id="imageId" name="imageId">
</form>

Answer 1

更新的答案

实例化后，除非您直接更改实例内部选项，否则Dropzone插件将保持相同的选项。

要更改拖放区的选项，可以使用以下行执行此操作：

$('.dropzone')[0].dropzone.options.maxFiles = newValue;

$('.dropzone')[0]返回第一个拖放区 DOM 元素

.dropzone.options返回拖放区的底层插件实例选项。现在，您可以直接在此对象上更改任何选项。

在这种情况下，您将不得不更改启动弹出窗口的功能，如下所示

function openImagePopup(id = null) {
$(".upload-images").show();
$.ajax({
url: 'fetch.php',
type: 'post',
data: {id: id},
dataType: 'json',
success:function(response) {
var imagecount = response.counts;
$('.dropzone')[0].dropzone.options.maxFiles = imagecount;
}
});
}

并像这样更改成功事件上的放置区：

onyxDropzone.on("success", function(file, response) {
let parsedResponse = JSON.parse(response);
file.upload_ticket = parsedResponse.file_link;
var imagecount = $('.dropzone')[0].dropzone.options.maxFiles - 1;
$('.dropzone')[0].dropzone.options.maxFiles = imagecount;
});

如您所见，您还可以删除元素上的 data-count=" 属性，并从插件实例中重用该值options.maxFiles

Answer 2

在花了几个小时的反复试验和错误之后，我意识到在许多情况下，使用 Dropzone 中的maxFiles设置并不完全是预期的。该设置只会限制通过资源管理器/拖放上传文件，但在重新加载后可以上传更多文件。它也不会反映 server 端上传的任何失败(例如文件大小太大(。

从外部更改已初始化的放置区的maxFiles设置的值是不可能的。例如，在使用 ajax 删除某些图像后重置允许的文件数量将不起作用。

为了真正控制可以上传到服务器的文件数量，必须在服务器上进行计数。然后在 Dropzone 的success函数中，我们应该处理 ajax 响应：

success: function (file, response) {
var response_data = jQuery.parseJSON(response);
if(!response_data.success) {
$(file.previewElement).addClass('dz-error');
$(file.previewElement).addClass('dz- complete');
$(file.previewElement).find('.dz-error-message').text(response_data.error);
}
}

response是分配给 Dropzone<form>action属性的脚本提供的反馈信息，例如<form action="/uploader">.