如何在Rails中使用Ajax和Jquery将图像上传到Amazon AWS（S3）？

我希望用户从网站上传他们的图片。 我已经完成了大部分工作但是现在，我在将图像上传到服务器时遇到了困难。 我该如何解决这个问题？

HTML –

 
 
  ">  
 
 X 
 
  
Delete
   
Cancel
  
 
   
 Upload Here
  
 <input type="hidden" name="user_id1_key" value=""/>  
 
 
 
    

咖啡脚本 –

 $ -> if $('#target1 img').length == 1 $('#file_browser1').addClass 'none' $('#close1').addClass 'delete1' $('#closebtn1').on 'click', (e) -> $('#closemsg1').addClass 'msg1' $('#cancelbtn1').click -> $('#closemsg1').removeClass 'msg1' $('#deletebtn1').click -> $('#close1').removeClass 'delete1' $('#closemsg1').removeClass 'msg1' $('#target1 > img').hide() $('#file_browser1').removeClass 'none' $('#file-upload1').val('') return $('#file-upload1').on 'change', (event) -> files = event.target.files image = files[0] console.log image.size reader = new FileReader $.ajax({ type: "GET", url: "http://localhost:3000/users/get_url/13", success :(data) -> console.log data[0].url $.ajax({ url: data[0].url, type: 'PUT', xhr: -> myXhr = $.ajaxSettings.xhr(); if (myXhr.upload) myXhr.upload.addEventListener('progress', progressHandlingFunction, false); return myXhr; , success: (data) -> alert "abcd", error: (data) -> alert data[0], data: $('#file-upload1')[0].files[0], cache: $.param(false), contentType: "binary/octet-stream", processData: $.param(false) }, 'json'); }) reader.onload = (file) -> img = new Image img.src = file.target.result $('#target1').html img $('#file_browser1').addClass 'none' $('#close1').addClass 'delete1' $('#closebtn1').on 'click', (e) -> $('#closemsg1').addClass 'msg1' $('#cancelbtn1').click -> $('#closemsg1').removeClass 'msg1' $('#deletebtn1').click -> $('#close1').removeClass 'delete1' $('#closemsg1').removeClass 'msg1' $('#target1 > img').hide() $('#file_browser1').removeClass 'none' $('#file-upload1').val('') return return reader.readAsDataURL image console.log files return 

PS – 我已经使用Json从AWS-URL获取URL，并且一旦从浏览器中选择文件就应该异步上载Image，因为没有可用的上传按钮。

Answer 1

Heroku 详细说明了如何做到这一点。 我建议使用直接上传到S3。 万一你想念它有autoUpload选项。