我想在我的Laravel网站上使用Dropzone.js。
这是我的设置:
index.blade.php
:
<form action="/documents" method="POST" class="dropzone" id="my-dropzone" enctype="multipart/form-data">
@csrf
</form>
在我的app.js
文件中,我有以下代码:
window.Dropzone = require('dropzone');
(function () {
Dropzone.autoDiscover = false;
Dropzone.options.myDropzone = {
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 1, // MB
acceptedFiles: 'image/*,application/pdf',
parallelUploads: 8,
addRemoveLinks: false,
createImageThumbnails: false,
autoProcessQueue: true,
previewTemplate: document.getElementById('dropzone-preview-template').innerHTML,
accept: function (file, done) {
console.log(file.name)
},
};
});
实际的Dropzone元素出现在页面上,我可以用它来上传文件。但是,我的Dropzone.options
没有得到尊重。
例如,我可以上传大于1MB的文件,我可以上传所有文件类型,即使我只想上传图像和PDF文件。
如果我移动它:在Dropzone.autoDiscover = false;
之外的(function () {});
,Dropzone元素根本不起作用。
我做错了什么?
您已将代码包含在匿名函数中但未调用它,因此插件选项代码未被执行。要么删除这个匿名函数,要么调用它,如下所示:
(function () {
})(); // call the function
试试这样:
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("#dropzone", {
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 1, // MB
acceptedFiles: "image/*,application/pdf",
parallelUploads: 8,
addRemoveLinks: false,
createImageThumbnails: false,
autoProcessQueue: true,
previewTemplate: document.getElementById("dropzone-preview-template")
.innerHTML,
accept: function(file, done) {
console.log(file.name);
}
});