Question

我需要上传多张图片（但文件字段不包含多张true），每张图片都应显示为预览，并将每张上传的图片存储在数组中。我正在使用回形针进行图像上传，并使用了remotipart gem通过ajax上传文件。

这是我的表格

  <%= form_for @incident, html: { class: 'incident__form' }, remote: true do |form| %>
              <%= form.fields_for :attachments do |attachment| %>
                <% unless attachment.object.new_record? %>
                  <div class="upload-image-preview" id="Attachment-<%= attachment.object.id %>" saved="yes">
                    <a title="<%= attachment.object.attachment_file_name %>" href="<%=attachment.object.attachment.url %>">
                    <div class="image-hover">
                      <div class="image-thumb" style="background-image:url(<%= asset_path attachment.object.attachment.url %>)">
                      </div>
                    </div>
                    </a>
                    <span class="remove"></span>
                  </div>
                  <%= attachment.hidden_field '_destroy', id: 'AttachmentDestroy-' + "#{attachment.object.id}" %>
                <% end %>
              <% end %>

              <input type="file" id="attachment" accept="image/jpeg,image/png" aria-invalid="false">
            </div>
          </div>

          <% end %>
          <%= form.submit 'SUBMIT', class: "btn btn-rounded btn-primary", data: { disable_with: "Submitting..." } %>
        <% end %>

在文件字段更改的脚本中，在我的咖啡脚本中，

 incidentImages = []
    imageUpload = () ->
      if window.File and window.FileList and window.FileReader
        $('#attachment').on 'change', (e) ->
          file = e.target.files
          fileLength = file.length
          f = file[0]
          incidentImages.push(file)

          fileReader = new FileReader
          # Image preview
          fileReader.onload = (e) ->
            file = e.target
            imageUploaded = $('<div class="image-thumb">').css('background-image', "url(" + e.target.result + ")");
            $('<div class="upload-image-preview" id="image-preview_' + imageCount + '"></div>').insertBefore '#attachment'
            $('#image-preview_' + imageCount).append('<a title=\'Incident attachment\' href=' + e.target.result + '><div class="image-hover"></div></a>');
            $('#image-preview_' + imageCount + ' .image-hover').append(imageUploaded)
            $('#image-preview_' + imageCount).append('<span class="remove"></span>');
            return
          fileReader.readAsDataURL f
          return;

我在将文件字段更改为incidentImages数组时推送图像。我将文件存储在数组中，因为当验证失败时，如https://github.com/thoughtbot/paperclip/issues/72一样，我需要重构输入文件字段使用incidentImages的数组。在chrome和safari中一切正常，但在Firefox浏览器中，当文件incidentImages.push(file)被上传时，FileList对象将被推送到incidentImages。在chrome和safari中，当上传另一个图像时，新的FileList对象将被推送到数组。

但是Firefox处理方式有所不同，当文件被上传后，新的fileList对象被推到数组中，当另一个文件被前一个索引中的FileList对象上传后，被最新上传的图像替换，请在firefox浏览器中检查此小提琴， https://jsfiddle.net/aarthi_101/65b8esjn/1/

删除输入字段并添加新的输入字段时，可以解决此问题

$('#attachment').on 'change', (e) ->
    file = e.target.files
    fileLength = file.length
    f = file[0]
    incidentImages.push(file)
    $(this).remove()
    $('.image-list').append('<input type="file" id="attachment" accept="image/jpeg,image/png" aria-invalid="false">')

但这不是一个好的解决方案。如何处理文件上传

使用Remotipart处理带有回形针导轨的多个图像

0 个答案: