我使用dropzone.js作为拖放文件上传解决方案。我只想上传一个文件,如果我上传第二个文件,第一个应该删除,第二个应该上传。 任何想法怎么做..
这是我的HTML
<form class="dropzone dz-clickable" action="upload.php" enctype='multipart/form-data'>
<i class="fa fa-cloud-upload element"></i>
<div style="color:gray;">Drag and drop or click to upload image</div>
<input type="hidden" name="filenameEmail" class="filenameEmail" value="">
<input type="hidden" name="side" value="front">
</form>
我更改了dropzone.js
maxFiles: 1
它只允许上传一个文件,但我无法删除以前上传的文件。请帮我解决。谢谢提前
答案 0 :(得分:75)
maxFiles:1 用于告诉dropzone应该只有一个文件。当有超过1个文件时,将调用 maxfilesexceeded 函数,超出文件作为第一个参数。
这是一个删除第一个文件预览并添加新文件的简单函数:)
maxFiles:1,
init: function() {
this.on("maxfilesexceeded", function(file) {
this.removeAllFiles();
this.addFile(file);
});
}
答案 1 :(得分:16)
我将事件maxfilesexceeded
与方法addFile
一起使用,然后进入事件调用的无限循环。这应该是使用addFile
的问题,因为我没有在官方网站或GitHub wiki中看到它。最后我用addedfile
事件解决了。当我写(4.3.0)时,Dropzone.js是最新版本。
init: function() {
this.on('addedfile', function(file) {
if (this.files.length > 1) {
this.removeFile(this.files[0]);
}
});
}
答案 2 :(得分:13)
将maxFiles
限制为1仍允许在上传对话框中选择多个文件。要禁止在配置中选择多个图像,请指定以下init函数:
maxFiles:1,
init: function() {
this.hiddenFileInput.removeAttribute('multiple');
}
答案 3 :(得分:1)
Dropzone.prototype.defaultOptions.init = function () {
this.hiddenFileInput.removeAttribute('multiple');
this.on("maxfilesexceeded", function (file) {
this.removeAllFiles();
this.addFile(file);
});
};
对我来说这是wokrk。
答案 4 :(得分:0)
两种解决方案的组合在init函数中为我完成了工作:
this.on("addedfile", function (file) {
if (this.files.length > 1) {
this.removeAllFiles()
this.addFile(file);
}
});
答案 5 :(得分:-1)
这些解决方案都不适合我。
maxfilesexceeded
事件被调用太晚,即在尝试添加文件后。
使用this.removeFile(this.files[0]);
的其他解决方案导致"Uncaught TypeError: Cannot read property 'removeChild' of null".
或无限循环。
解决 -
maxFiles: 2,
init: function () {
this.on("addedfile", function (file) {
if (this.files.length > 1) {
this.files = this.files.slice(1, 2);
}
});
}
使用dz-clickable
(文件选择器btn)并拖放时工作。