这是一个实时示例,如果您将任何文件上传到dropzone,它将永远旋转,在多个浏览器上尝试:
https://buildgrid.com/bom_supplier_view/ZzrmkDNnx3L0W4NRUYOqVEap4GQXj1bP
我以为关闭autoProcessQueue会修复。仅供参考,在用户点击提交之前,文件不会上传到服务器。
var bgDropzone = new dropzone("div#dropzone", {
addRemoveLinks: true,
dictRemoveFile: 'Remove',
url: "/bom_file_upload",
autoProcessQueue: false,
maxFiles: 1,
maxFilesize: 10,
acceptedFiles: ".pdf,.doc,.docx,.xls,.xlsx,.csv,image/*",
createImageThumbnails: false,
maxfilesexceeded: (file) => { // For replacing the current file with another one that was just dropped/selected.
bgDropzone.removeAllFiles();
bgDropzone.addFile(file);
},
dictDefaultMessage: "<i class='fa fa-upload fa-4x'></i><br/><h3>Drag & Drop</h3> files anywhere or <span class='underline'>browse...</span>",
success: (file, response) => {
toastr.success(bgDropzone.options.params.toast_text, '', {
onHidden: () => {
window.location.href = "/bom/" + bgDropzone.options.params.bom_id;
}
});
},
error: (file, errorMessage, xhr) => {
if (xhr) {
toastr.error('There was an error processing your request: ' + errorMessage, '');
}
},
uploadProgress: (progress) => {
bgDropzone.querySelector("#total-progress .progress-bar").style.width = progress + "%";
}
})
.on('addedfile', (file) => {
var bomName = file.name.toString().toLowerCase()
.replace(/\.[^/.]+$/, "")
.replace(/[_-]/g, ' ')
.replace(/(?:^|\s)\S/g, (a) => {
return a.toUpperCase();
});
$('input[name=bom_name]').val(bomName);
$('input[name=filename]').val(file.name.toString());
});
// Removes error state styling from form fields and the Dropzone.
function removeErrorStyles() {
$('.form-group').removeClass('has-error');
$('div#dropzone').css('border', '3px dashed #0076be');
$('div#notifications').hide();
}