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

来源