Question

我使用Dropzone.js进行多个文件上传。

一切正常，完全保存在数据库中。但是当我为所有图像渲染视图时，我看到一些图像（物理文件）从未存储在资产文件夹中。

Dropzone Part HTML：

<div id="actions" class="row">
  <div class="col-md-6 mb10">
    <!-- The fileinput-button span is used to style the file input field as button -->
    <span class="btn btn-success fileinput-button dz-clickable"><i class="glyphicon glyphicon-plus"></i><span>Add files</span></span>
  </div>
  <div class="col-md-6 text-right upload-files">
    <%= submit_tag "Upload Files", class: "btn btn-success start" %>
    <button aria-hidden="true" class="btn btn-info" onclick="window.close();">Close</button>
  </div>
  <div class="col-md-12">
   <!-- The global file processing state -->
    <span class="fileupload-process">
      <div id="total-progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" style="opacity: 0;">
        <div class="progress-bar progress-bar-success" style="width: 100%;" data-dz-uploadprogress=""></div>
    </div>
    </span>
  </div>
</div>
<div class="row">
<!-- HTML heavily inspired by http://blueimp.github.io/jQuery-File-Upload/ -->
<div class="table table-striped" class="files" id="previews">

  <div id="template" class="file-row">
    <!-- This is used as the file preview template -->
    <div>
        <span class="preview"><img data-dz-thumbnail /></span>
    </div>
    <div>
        <p class="name" data-dz-name></p>
        <strong class="error text-danger" data-dz-errormessage></strong>
    </div>
    <div>
        <p class="size" data-dz-size></p>
        <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
          <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
        </div>
    </div>
    <div>
      <button class="btn btn-primary start">
          <i class="glyphicon glyphicon-upload"></i>
          <span>Start</span>
      </button>
      <button data-dz-remove class="btn btn-warning cancel">
          <i class="glyphicon glyphicon-ban-circle"></i>
          <span>Cancel</span>
      </button>
      <button data-dz-remove class="btn btn-danger delete">
        <i class="glyphicon glyphicon-trash"></i>
        <span>Delete</span>
      </button>
    </div>
  </div>

</div>

Dropzone Part JS：

// Get the template HTML and remove it from the doumenthe template HTML and remove it from the doument
var previewNode = document.querySelector("#template");
previewNode.id = "";
var previewTemplate = previewNode.parentNode.innerHTML;
previewNode.parentNode.removeChild(previewNode);

var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone
  url: "/asset_uploads", // Set the url
  thumbnailWidth: 80,
  thumbnailHeight: 80,
  parallelUploads: 20,
  previewTemplate: previewTemplate,
  paramName: "file",
  autoQueue: false, // Make sure the files aren't queued until manually added
  previewsContainer: "#previews", // Define the container to display the previews
  clickable: ".fileinput-button", // Define the element that should be used as click trigger to select files.
  headers: {
    'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
  }
});

 myDropzone.on("addedfile", function(file) {
  // Hookup the start button
    console.log('addedfile')
    file.previewElement.querySelector(".start").onclick = function() { myDropzone.enqueueFile(file); };
});

// Update the total progress bar
myDropzone.on("totaluploadprogress", function(progress) {
  document.querySelector("#total-progress .progress-bar").style.width = progress + "%";
});

myDropzone.on("sending", function(file) {
  // Show the total progress bar when upload starts
  document.querySelector("#total-progress").style.opacity = "1";
  // And disable the start button
  file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
});

// Hide the total progress bar when nothing's uploading anymore
myDropzone.on("queuecomplete", function(progress) {
  document.querySelector("#total-progress").style.opacity = "0";
});

// Setup the buttons for all transfers
// The "add files" button doesn't need to be setup because the config
// `clickable` has already been specified.
document.querySelector("#actions .start").onclick = function() {
    console.log('ADDED')

myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
};
// document.querySelector("#actions .cancel").onclick = function() {
//   myDropzone.removeAllFiles(true);
// };

参考链接：http://www.dropzonejs.com/bootstrap.html

<div class="row">
  <% AssetUpload.all.each do |psau| %>
    <div class="col-md-1">
      <img style="height: 75px;" src="<%= psau.asset_path_url %>" class="img-responsive" data-rel="prettyPhoto" alt="">
    </div>
  <% end %>
</div>

更新

有些原因当我在控制器中发送多个文件进行保存时，它会跳过一些正在处理的文件，当我通过递归方法重新保存它时，它完美地工作...到目前为止没有破碎的图像

def retry_image_upload(psau, file, counter)
    psau.update(asset_path: file, upload_retry_counter: counter)        
    if AssetUpload.find_by(id: psau.id).asset_path.file.exists?
      render json: {'success': true}
    else
      counter = counter + 1
      if counter <= 5
        retry_image_upload(psau, file, counter)
      else
        AssetUpload.find_by(id: psau.id).destroy
        render json: {'success': false}
      end
    end
  end

Dropzone文件上传显示成功但物理文件丢失

0 个答案: