Rails中使用CarrierWave/S3实现jQuery文件上传

Question

我对jquery文件上传插件/库不是很熟悉。

我正在尝试构建一个图像上传器，通过jquery/ajax在前端加载图像，这样我就不必在图像上传时更新网站，然后将其发送到后端以使用carrierwave将其保存在Amazon S3中。

我有： 后端：carrierwave + fog用于存储Amazon S3上的数据 前端：jquery - fileupload插件 我找到的唯一提示是https://github.com/blueimp/jQuery-File-Upload以及它的演示文稿，但我甚至不确定该存储库是否是教程还是库的源代码？ 如果jQuery-File-Upload是一个示例，则通过jquery上传文件并使用fileupload似乎太复杂了。

在我的coffee script中，这就是我所拥有的。

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库吗？（带有良好的示例）

谢谢！

- Matilda

Answer 1

看一下https://github.com/yortz/carrierwave_jquery_file_upload。这是一个完整的示例，包括JQuery文件上传、使用CarrierWave和S3的Rails。也许它可以帮到你。

- Stefan Staub

Answer 2

维基页面提供了详细的指示和代码，教你如何进行设置。我使用相同的设置，没有遇到任何问题。

如果你想允许用户一次选择多个文件： 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

希望这能帮到你。

- simonrohrbach

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对象。

源代码

- svelandiag