HTML 文件输入到 Dropzone

Question

我想使用dropzone作为另一种形式的文件输入

以下是在Dropzone.js<input type="file">的帮助下的代码和Stackoverflow：

<form class="form-horizontal" action="/details/store" method="post" enctype="multipart/form-data">
    {{ csrf_field() }}
    <div class="row">
        <div class="form-group col-lg-6">
            <label for="title" class="control-label col-lg-3 text-semibold">Title</label>
            <div class="col-lg-9 {{ $errors->has('title') ? 'has-error' : '' }}">
                <input name="title" type="text" class="form-control" value="{{ old('title') }}" required>

                @if ($errors->has('title'))
                  <span class="help-block">{{ $errors->first('title') }}</span>
                @endif
            </div>
        </div>

        <div class="form-group col-lg-6">
            <label for="subtitle" class="control-label col-lg-3 text-semibold">Sub Title</label>
            <div class="col-lg-9">
                <input name="subtitle" type="text" class="form-control" value="{{ old('subtitle') }}">
            </div>
        </div>

        <div class="form-group col-lg-12">
            <label for="description" class="control-label col-lg-1 text-semibold">Description</label>
            <div class="col-lg-11">
                <textarea name="description" class="form-control">{{ old('description') }}</textarea>
            </div>
        </div>

        <div class="form-group col-lg-12">
            <label for="images" class="control-label col-lg-1 text-semibold">Images</label>
            <div class="col-lg-9" style="margin-left:4em;">
                <span class="help-block text-semibold" style="color:blue">Accepted Formats: .jpg, .jpeg, .png, .gif</span>

<!-- Here is the file input I want to convert to dropzone -->
                <input type="file" name="images[]" class="file-styled btn btn-primary" accept=".jpg, .jpeg, .png" required multiple>

                <span class="help-block">Accepted formats: png, jpg, gif</span>
                @if ($errors->has('images'))
                  <span class="help-block">{{ $errors->first('images') }}</span>
                @endif
            </div>
        </div>
    </div>

    <div class="text-center">
        <button type="submit" class="btn btn-primary">Create</button>
    </div>
</form>

我尝试了不同的方法来将 dropzone 与 div 一起使用，例如：

<div action="#" id="dropzone" class="dropzone">
    <div class="fallback">
        <input type="file" name="images[]" class="file-styled btn btn-primary" accept=".jpg, .jpeg, .png" required multiple>
    </div>
</div>

和JS

Dropzone.options.dropzone = {
  url: "/properties/store",
  headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
  },
  autoProcessQueue:false,
  uploadMultiple:true,
  paramName:"images",
  maxFilesize:1,
  maxFiles:10,
  addRemoveLinks:true,
  acceptedFiles: ".jpeg,.jpg,.png,.gif",
};

Dropzone 显示在表单内，甚至还加载（和删除）图像，但是当我提交表单时，服务器端没有收到任何信息图像。input type="file"根据需要接收正常数据......

我无法理解单独的用法action=""我无法理解div 和 JS 中url:""，因为我不需要文件的单独 URL。我想使用表单的操作路径将其与表单一起提交。

顺便说一句，我使用 PHP-Laravel 进行服务器端处理。

Answer 1

使用 Drupal，我发现放弃 Dropzone.js 并通过 JQuery 实现本机拖放行为更容易，代码如下：

  const dropzone = $('#fieldWrapper')

  // click input file field
  dropzone.on('click', function () {
    $("#inputID").trigger("click");
  })

  // prevent default browser behavior
  dropzone.on('drag dragstart dragend dragover dragenter dragleave drop', function(e) {
      e.preventDefault();
      e.stopPropagation();
    })

  // add visual drag information  
  dropzone.on('dragover dragenter', function() {
      $('#fieldWrapper').addClass('active');
    })
  dropzone.on('dragleave dragend', function() {
    $('#fieldWrapper').removeClass('active');
    }) 

  // catch file drop and add it to input
  dropzone.on("drop", e => {
    e.preventDefault();
    let files = e.originalEvent.dataTransfer.files

    if (files.length) {
      $("#inputID").prop("files", files);
    }
  });

  // trigger file submission behavior
  $("#inputID").on('change', function (e) {
    if (e.target.files.length) {
      // trigger any behavior here 
    }
  })

Answer 2

您可以使用不同的方法来管理它。

1. 删除这个autoProcessQueue:false,并使用单独的 url（而不是url: "/properties/store"）来上传图像。您可以使用类似下面的代码

   Dropzone.options.dropzone = {
     url: "/your_controller/store_image",
     sending: function(data, xhr, formData){
         formData.append('_token', "{{ csrf_token() }}" );
   
      },
   
     paramName:"images",
   
     maxFiles:10,
     addRemoveLinks:true,
     acceptedFiles: ".jpeg,.jpg,.png,.gif",
     success: function(results, callback){
       //set value of your hidden input field here
       console.log(results['name']);
     }
   }; 
   

2. 然后使用该 url，在临时文件夹中管理这些上传的文件，并使用隐藏字段将这些文件数据存储在主表单中。

   public function store_image(Request $request){
     $file = Input::file('images');
     //getting image extension
     $extension = Input::file($filename)->getClientOriginalExtension(); 
     //renameing image
     $fileName = time() . '-' . uniqid() . '.' .$extension; 
     //uploading file to given path
       Input::file($filename)->move($destinationPath, $fileName); 
      echo json_encode($file->getClientOriginalName());
     }
   

3. 最后，您可以轻松保存表单数据。当用户提交主表单时，将文件移动到主文件夹并将相关数据保存到数据库。