使用Dropzone.js和Laravel MediaLibrary包进行多个文件上传

Question

我已经实现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>

任何帮助将得到真正的赞赏

Answer 1

在阅读dropzone.js插件文档时，是的，您可以选择acceptedFiles 。

默认情况下，它设置为null从而允许任何文件类型上载。

您可以通过指定文件扩展名或文件MIME类型列表来设置自己所需的文件类型。

在下面的代码我指定只允许JPG ， GIF或MP3这样： acceptedFiles: '.jpg, .gif, .mp3' ，我已经在javascript中删除了你的PHP代码用于演示目的。

 <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类型，因为任何人都可以通过重命名来更改文件扩展名，所以在我们的情况下，这将更改为acceptedFiles: 'image/jpeg, image/gif, audio/mpeg' 。

如果您只想允许音频文件，请添加所需的文件扩展名或MIME类型 。