Javascript jquery文件上载与rails carrierwave/s3

我不太熟悉jquery文件上传插件/库

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

我有： 后端：carrierwave+fog存储在amazon S3上 前端：jquery-fileupload插件 我发现唯一能给我一些提示的是它的演示，但我甚至不确定该库是教程还是库的源代码？ 如果以jquery文件上传为例，那么通过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库吗？（举例说明）

---

谢谢

看一看。这是一个完整的示例，包括JQuery文件上传、带有CarrierWave的rails和S3。也许它可以帮助您。

wiki页面提供了关于如何设置的详细说明和代码。我有相同的设置，它对我来说没有任何问题

如果要允许用户同时选择多个文件： )

如果只允许在文件对话框中选择一个文件：

---

希望这能有所帮助。

在我的建议中看到了这个问题，下面是如何通过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对象所必需的