使用 Dropzone.js 和 Laravel MediaLibrary 包上传多个文件
Multiple File Upload with Dropzone.js and Laravel MediaLibrary Package
我已经实现 Dropzone.js 使用我的表单上传多个文件,它工作正常但我想更改接受的文件类型属性,它只接受我想上传音频文件的文件..是这可能吗?
我一步一步地按照这个步骤让它工作; https://laraveldaily.com/multiple-file-upload-with-dropzone-js-and-laravel-medialibrary-package/
<fieldset>
<div class="form-group">
<label for="document">Documents</label>
<div class="needsclick dropzone" id="document-dropzone">
</div>
</div>
</fieldset>
<script type="text/javascript">
var uploadedDocumentMap = {}
Dropzone.options.documentDropzone = {
url: '{{ route('music.storeMedia') }}',
maxFilesize: 10, // MB
addRemoveLinks: true,
headers: {
'X-CSRF-TOKEN': "{{ csrf_token() }}"
},
success: function (file, response) {
$('form').append('<input type="hidden" name="document[]" value="' + response.name + '">')
uploadedDocumentMap[file.name] = response.name
},
removedfile: function (file) {
file.previewElement.remove()
var name = ''
if (typeof file.file_name !== 'undefined') {
name = file.file_name
} else {
name = uploadedDocumentMap[file.name]
}
$('form').find('input[name="document[]"][value="' + name + '"]').remove()
}
,
init: function () {
@if(isset($project) && $project->document)
var files =
{!! json_encode($project->document) !!}
for (var i in files) {
var file = files[i]
this.options.addedfile.call(this, file)
file.previewElement.classList.add('dz-complete')
$('form').append('<input type="hidden" name="document[]" value="' + file.file_name + '">')
}
@endif
}
}
</script>
我们将不胜感激任何帮助
阅读 dropzone.js 插件文档后,是的,您可以使用选项 acceptedFiles.
默认设置为 null
,因此允许上传任何文件类型。
您可以通过指定文件扩展名或文件列表来设置自己想要的文件类型MIME Type。
在下面的代码中,我指定仅允许 JPG
、GIF
或 MP3
,如下所示:acceptedFiles: '.jpg, .gif, .mp3'
,我删除了您的 PHP javascript 中的代码用于演示目的。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.css">
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.js"></script>
<fieldset>
<div class="form-group">
<label for="document">Documents</label>
<div class="needsclick dropzone" id="document-dropzone">
</div>
</div>
</fieldset>
<script type="text/javascript">
var uploadedDocumentMap = {};
Dropzone.options.documentDropzone = {
url: '/echo/html/',
maxFilesize: 10, // MB
addRemoveLinks: true,
success: function (file, response) {
$('form').append('<input type="hidden" name="document[]" value="' + response.name + '">')
uploadedDocumentMap[file.name] = response.name
},
acceptedFiles: '.jpg, .gif, .mp3', //file extension or MIME Type to accept uploading
removedfile: function (file) {
file.previewElement.remove()
var name = ''
if (typeof file.file_name !== 'undefined') {
name = file.file_name
} else {
name = uploadedDocumentMap[file.name]
}
$('form').find('input[name="document[]"][value="' + name + '"]').remove()
}
,
init: function (e) {
//dropbox initialization done!
}
}
</script>
话虽这么说,但您也应该始终在上传之前检查服务器端的文件扩展名,因为您永远无法相信来自客户端浏览器请求的内容。
此外,我建议只检查文件 MIME Type,因为任何人都可以通过重命名来更改文件扩展名,因此在我们的例子中,这将更改为 acceptedFiles: 'image/jpeg, image/gif, audio/mpeg'
。
如果您只想允许音频文件,请输入您想要的文件扩展名或 MIME Type。
我已经实现 Dropzone.js 使用我的表单上传多个文件,它工作正常但我想更改接受的文件类型属性,它只接受我想上传音频文件的文件..是这可能吗?
我一步一步地按照这个步骤让它工作; https://laraveldaily.com/multiple-file-upload-with-dropzone-js-and-laravel-medialibrary-package/
<fieldset>
<div class="form-group">
<label for="document">Documents</label>
<div class="needsclick dropzone" id="document-dropzone">
</div>
</div>
</fieldset>
<script type="text/javascript">
var uploadedDocumentMap = {}
Dropzone.options.documentDropzone = {
url: '{{ route('music.storeMedia') }}',
maxFilesize: 10, // MB
addRemoveLinks: true,
headers: {
'X-CSRF-TOKEN': "{{ csrf_token() }}"
},
success: function (file, response) {
$('form').append('<input type="hidden" name="document[]" value="' + response.name + '">')
uploadedDocumentMap[file.name] = response.name
},
removedfile: function (file) {
file.previewElement.remove()
var name = ''
if (typeof file.file_name !== 'undefined') {
name = file.file_name
} else {
name = uploadedDocumentMap[file.name]
}
$('form').find('input[name="document[]"][value="' + name + '"]').remove()
}
,
init: function () {
@if(isset($project) && $project->document)
var files =
{!! json_encode($project->document) !!}
for (var i in files) {
var file = files[i]
this.options.addedfile.call(this, file)
file.previewElement.classList.add('dz-complete')
$('form').append('<input type="hidden" name="document[]" value="' + file.file_name + '">')
}
@endif
}
}
</script>
我们将不胜感激任何帮助
阅读 dropzone.js 插件文档后,是的,您可以使用选项 acceptedFiles.
默认设置为 null
,因此允许上传任何文件类型。
您可以通过指定文件扩展名或文件列表来设置自己想要的文件类型MIME Type。
在下面的代码中,我指定仅允许 JPG
、GIF
或 MP3
,如下所示:acceptedFiles: '.jpg, .gif, .mp3'
,我删除了您的 PHP javascript 中的代码用于演示目的。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.css">
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.js"></script>
<fieldset>
<div class="form-group">
<label for="document">Documents</label>
<div class="needsclick dropzone" id="document-dropzone">
</div>
</div>
</fieldset>
<script type="text/javascript">
var uploadedDocumentMap = {};
Dropzone.options.documentDropzone = {
url: '/echo/html/',
maxFilesize: 10, // MB
addRemoveLinks: true,
success: function (file, response) {
$('form').append('<input type="hidden" name="document[]" value="' + response.name + '">')
uploadedDocumentMap[file.name] = response.name
},
acceptedFiles: '.jpg, .gif, .mp3', //file extension or MIME Type to accept uploading
removedfile: function (file) {
file.previewElement.remove()
var name = ''
if (typeof file.file_name !== 'undefined') {
name = file.file_name
} else {
name = uploadedDocumentMap[file.name]
}
$('form').find('input[name="document[]"][value="' + name + '"]').remove()
}
,
init: function (e) {
//dropbox initialization done!
}
}
</script>
话虽这么说,但您也应该始终在上传之前检查服务器端的文件扩展名,因为您永远无法相信来自客户端浏览器请求的内容。
此外,我建议只检查文件 MIME Type,因为任何人都可以通过重命名来更改文件扩展名,因此在我们的例子中,这将更改为 acceptedFiles: 'image/jpeg, image/gif, audio/mpeg'
。
如果您只想允许音频文件,请输入您想要的文件扩展名或 MIME Type。