Question

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

以下是<input type="file">的代码，其中包含Dropzone.js和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"数据正在按需收到......

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

BTW，我正在使用PHP-Laravel进行服务器端处理。

Answer 1

您可以使用其他方法进行管理。

删除此Picasso .with(context) .setLoggingEnabled(true) ....＆amp;使用单独的网址（而不是autoProcessQueue:false,）进行图片上传。你可以使用类似下面的代码
```
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']);
  }
};

最后，您可以毫不费力地保存表单数据。当用户提交主表单时，将文件移动到主文件夹＆amp;将您的相关数据保存到db。

Answer 2

与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 
    }
  })

HTML文件输入到Dropzone

2 个答案: