Question

我试着在最近2天解决我的问题而且没有正确的解决方案，我真的需要帮助。

这是我的表格：

<% simple_form_for @something , html: { class: "form-horizontal dropzone"} do |f| %>
<% f.input :title %>
<% f.input :description %>
<div class="dropzone-previews">
    <div class="fallback">
      <%= f.simple_fields_for :uploads do |u| %>
        <%= u.input :attachment, as: :file, multiple: true %>
      <% end %>
    </div>
  </div>

和js：

$(function () {
  Dropzone.autoDiscover = false;
  var mediaDropzone;
  mediaDropzone = new Dropzone(".dropzone", {
    maxFiles: 2,
    previewsContainer: '.dropzone-previews',
    addRemoveLinks: true,
    paramName: "issue[uploads_attributes][][attachment]",
    autoProcessQueue: true,
    clickable: true,
    headers: {
       'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
    }
  });
    mediaDropzone.on('sending', (file, xhr, formData) => {
       $.each(file.postData, function(k, v){
                formData.append(k, v);
            });
     });
});

上传工作正常，除预览外一切正常。

Answer 1

我已经解决了问题。当你将dropzone放到form元素时，它会为你提供所有表单上的额外边框。因此，要正确设置dropzone预览，我必须添加样式以形成并在元素上设置边框，我想看到dropzone。之后我不得不改变设置＆＃34;可点击＆＃34;在该预览元素上。所以在我的情况下，我使用过：

形式：

<% simple_form_for @something , html: { class: "form-horizontal dropzone" style: "border: 0"} do |f| %>
(...)
<div class="dropzone-previews" style="border-style: dashed;">
(...)
</div>

在js：

clickable: ".dropzone-previews"

即使我使用previewsContainer，Dropzone也会在整个表单上显示

1 个答案: