jquery fileupload with railscarrierwave/s3

Question

我對 jquery 文件上傳插件/庫不太熟悉。

我正在嘗試構建一個圖像上傳器，通過前端的 jquery/ajax 加載圖像，這樣我就不必在圖像上傳時更新站點，然后將其發送到后端到carrierwave，以便將其保存在亞馬遜s3。

我有： 后端：carrierwave + 霧存儲在亞馬遜 S3 前端：jquery - fileupload 插件我發現唯一能給我一些提示的是https://github.com/blueimp/jQuery-File-Upload及其演示，但我什至不確定該存儲庫是教程還是庫的源代碼？ 如果以 jQuery-File-Upload 為例，通過 jquery 上傳文件並使用 fileupload 似乎太復雜了。

在我的咖啡腳本上，這就是我所擁有的

initialize: ->
  @render()
  $.log "#{@name}: initialised"
  $('#campaign_main_image').fileupload
  $('#campaign_main_image').fileupload 'option'
    dataType: 'json'
    url: '/api/v3/upload'
    dropZone: $('.campaign-editor-about .dropzone')
    maxFileSize: 5000000
    acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i
    send: (e, data) =>
      $('#logo_wait').show()
    done: (e, data) =>
      @model.set
        logo: data.result.url
      @model.save()

這段代碼確實在 rails 上調用了我的路由器，但沒有發送任何圖像文件（我檢查了 chrome 上的網絡選項卡）所以我不知道這是否正確？ 有沒有可以找到文件上傳文檔的地方？ jquery 站點沒有任何東西...對於我的項目，我也需要拖放，那么有沒有更好的 jquery 庫？ （有很好的例子）

謝謝！

Answer 1

看看https://github.com/yortz/carrierwave_jquery_file_upload 。 它是一個完整的示例，包括 JQuery 文件上傳、帶有 CarrierWave 和 S3 的 rails。 也許它可以幫助你。

Answer 2

wiki 頁面提供了有關如何設置它的詳細說明和代碼。 我有相同的設置，它對我來說沒有任何問題。

如果你想允許用戶一次選擇多個文件： https://github.com/blueimp/jQuery-File-Upload/wiki/Rails-setup-for-V6-(multiple )

如果您只想允許在文件對話框中選擇一個文件： https : //github.com/blueimp/jQuery-File-Upload/wiki/Rails-setup-for-V6

希望這可以幫助。

Answer 3

好吧，剛剛在我的建議中看到了這個問題，這是您如何通過 ajax 發送圖像文件以供后端控制器處理的方法：

首先確保你的表單觸發了一個 js 事件並且你preventDefault

在您的 Javascript 中，您可以手動構建 FormData 對象：

var fileInput = document.querySelector('form input[type=file]');
var attachment = fileInput.files[0];

var formData = new FormData(); 
formData.append('attachment', attachment, 'filename.jpg');

然后你可以：

$.ajax({
  url: '/my/url',
  type: 'POST',
  data: formData,
  contentType: false,
  processData: false
});

請注意contentType和processData選項，它們是必需的，以便 jQuery 不會嘗試序列化 FormData 對象

來源