目前我使用 dropzone 来处理 Jquery 中的文件上传。到目前为止，它工作正常。
唯一的问题是，配置中有一个 maxFileSize 选项，它限制了“单个”文件的大小。
由于服务器（php.ini）也有“总”文件大小限制，我想知道如何在 dropzone.js 中限制它？
非常感谢。
【问题讨论】：
标签： php jquery file-upload upload dropzone.js
我发现这个解决方法定义了接受函数：
var totalsize = 0.0;
$("div#dropzone").dropzone({
accept: function(file, done) {
if (totalsize >= MAX_TOTAL_SIZE) {
file.status = Dropzone.CANCELED;
this._errorProcessing([file], "Max limit reached", null);
}else {
done();
}
}
init: function() {
this.on("addedfile", function(file) {
totalsize += parseFloat((file.size / (1024*1024)).toFixed(2));
});
this.on("removedfile", function(file) {
if(file.upload.progress != 0){
totalsize -= parseFloat((file.size / (1024*1024)).toFixed(2));
}
});
this.on("error", function(file) {
totalsize -= parseFloat((file.size / (1024*1024)).toFixed(2));
});
}
});
其中 MAX_TOTAL_SIZE 是 dropzone 不得超过的最大值。
【讨论】：
有点晚了，但也许其他人需要这个。 那么，您需要在 init 函数中创建一个新变量“totalSize”。 在文件中添加一个事件监听器以增加大小和另一个用于子结构，然后在您发送请求以显示错误之前进行一点控制，我的英语不好，所以这里是一个例子：
...
init: function() {
var totalsize = 0.0;
...
this.on("addedfile", function(file) {
...
// increment total size when we add a file (in Mb)
totalsize += parseFloat((file.size / (1024*1024)).toFixed(2));
//substruct the size of the removed file
removeButton.addEventListener("click", function(e) {
...
_this.removeFile(file);
totalsize -= parseFloat((file.size / (1024*1024)).toFixed(2));
...
});
...
});
//and an event for the submission to controle before submit don't forget to prevent default
this.on("sendingmultiple", function(data, xhr, formData) {
if (totalsize <= 20) {
//do the request
}else { // else show the error
$('#error').show();
$('#error').text('Oooops ! total files size must be less then 20Mb');
}
});
}
也许不是很清楚，所以有一个完整的代码示例，在我的代码中我添加了一个样式删除按钮，所以不要忘记删除它：
init: function() {
var totalsize = 0.0;
dzClosure = this; // Makes sure that 'this' is understood inside the functions below.
// for Dropzone to process the queue (instead of default form behavior):
document.getElementById("submit-all").addEventListener("click", function(e) {
// Make sure that the form isn't actually being sent.
e.preventDefault();
e.stopPropagation();
dzClosure.processQueue();
});
this.on("addedfile", function(file) {
// Create the remove button
var removeButton = Dropzone.createElement("<a href='javascript:;'' class='btn red btn-sm btn-block'>Remove</a>");
// Capture the Dropzone instance as closure.
var _this = this;
// Listen to the click event
removeButton.addEventListener("click", function(e) {
// Make sure the button click doesn't submit the form:
e.preventDefault();
e.stopPropagation();
// Remove the file preview.
_this.removeFile(file);
totalsize -= parseFloat((file.size / (1024*1024)).toFixed(2));
// If you want to the delete the file on the server as well,
// you can do the AJAX request here.
});
// Add the button to the file preview element.
file.previewElement.appendChild(removeButton);
//increment
totalsize += parseFloat((file.size / (1024*1024)).toFixed(2));
});
//send all the form data along with the files:
this.on("sendingmultiple", function(data, xhr, formData) {
if (totalsize <= 20) {
console.log(totalsize);
//u can append formData here too
formData.append("something", jQuery("#something").val());
}else {
$('#error').show();
$('#error').text('Oooops ! total files size must be less then 20Mb');
}
});
}
【讨论】：
尝试修改你的 php.ini（那个 php.ini 来自 apache，而不是来自 php），因为在 dropzoneJS 中，我认为 500mb 足够存储一次
在那里搜索 post_max_size ..假设把它放在 100M ，然后
upload_max_filesize = 50M ... 或者你喜欢怎么做！
祝你好运，希望对你有帮助！
【讨论】：
我只看到maxfilesize、paralleluploads 和maxfiles
我认为您可能需要在添加文件时跟踪它们的大小，也许使用
this.on("addedfile", function(file) { // perform task // });
... 计算文件大小并在超过总文件大小时禁用提交按钮。
document.getElementById('dropsubmit').disabled = false;
您可以使用“addedFile”和“removedFile”事件来更改跟踪文件大小的变量，因为文件被添加和删除。根据累积大小，将提交按钮设置为 true 或 false。
【讨论】：