如何在Rails中使用Ajax和Jquery将图像上传到Amazon AWS（S3）？ [英] How to upload an Image to Amazon AWS (S3) using Ajax and Jquery in Rails?

问题描述

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

I want the user to upload their image from the site. I've done most of the things but now, I'm facing difficulties while uploading the image to the server. How do I solve this issue?

HTML -

<div>
  <div style="height: 80px; position: relative;">
   <div id="target1">
    <% if !@aws_url3.nil? %>
     <img id="user_dl3" src="<%= @aws_url3 %>">
    <% end %>
  </div>
  <div id="close1" style="display: none;">
    <button id="closebtn1" class="closebtn">X</button>
  </div>
  <div id="closemsg1" style="display: none;  position: relative;">
    <button  id="deletebtn1" class="deletebtn">
        <p class="deletebtnstyle">Delete</p>
    </button>
    <button id="cancelbtn1" class="cancelbtn">
        <p class="cancelbtnstyle">Cancel</P>
    </button>
  </div>
  <div class="file_browser1" id="file_browser1">
    <label for="file-upload1" class="custom-file-upload z-depth-1">
        <i class="material-icons">&#xE147;</i>
        <p class="button-text"> Upload Here</p>
    </label>
  <form id="user_id1_form" action="">
    <input type="hidden" name="user_id1_key" value="<%= @aws_urls[0][:key] %>"/>
    <input id="file-upload1" type="file" accept="image/*" name="user_id1"/>
 </form>
 </div>
 </div>
 </div>
 <%= form_tag(user_url("#{@current_user.id}"), method: :put, id: "aws_key_form") do |f| %>
   <%= hidden_field_tag "aws_key1", @aws_urls[0][:key] %>
 <% end %>

咖啡脚本 -

$ ->

    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，因为没有可用的上传按钮。

P.S - I've used Json to get the URL from the AWS-URL and the Image should be uploaded asynchronously as soon as the file is selected from the browser as there is no upload button available.

推荐答案

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

Heroku have a detailed instruction how to do it. I recommend using direct upload to S3. In case you miss it there is autoUpload option.

这篇关于如何在Rails中使用Ajax和Jquery将图像上传到Amazon AWS（S3）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！