使用 JQuery 文件上传到亚马逊 S3 在客户端调整图像大小

我已经在互联网上看到了一些例子，例如：this https://github.com/blueimp/jQuery-File-Upload/wiki/Client-side-Image-Resizing and this one https://github.com/blueimp/jQuery-File-Upload/wiki/Upload-multiple-resolutions-of-one-image-with-multiple-resize-options，但我正在关注RailsCast 第 383 集上传到 Amazon S3 http://railscasts.com/episodes/383-uploading-to-amazon-s3当然，在视频的最后，他提到了使用 JavaScript 在客户端调整图像大小。 问题是，如果我按照他的例子，我无法实施。我正在使用宝石jquery-文件上传-rails https://github.com/tors/jquery-fileupload-rails/wiki

EDIT：我注意到我缺少一些 JS 所需的内容JQuery-fileupload 调整图像页面大小的示例 https://github.com/blueimp/jQuery-File-Upload/wiki/Client-side-Image-Resizing，但还是不行。 我的要求应用程序.js

//= require jquery-fileupload/vendor/jquery.ui.widget
//= require jquery-fileupload/vendor/load-image
//= require jquery-fileupload/vendor/canvas-to-blob
//= require jquery-fileupload/jquery.iframe-transport
//= require jquery-fileupload/jquery.fileupload
//= require jquery-fileupload/vendor/tmpl
//= require jquery.fileupload-process
//= require jquery.fileupload-image
//= require jquery-fileupload/locale

My 帖子.js.咖啡 http://pastebin.com/9sm7UtsP http://pastebin.com/9sm7UtsP

jQuery ->
  $('#fileupload').fileupload
    add: (e, data) ->
      types = /(\.|\/)(gif|jpe?g|png)$/i
      file = data.files[0]
      if types.test(file.type) || types.test(file.name)
        data.context = $(tmpl("template-upload", file))
        $('#fileupload').append(data.context)
        data.submit()
      else
        alert("#{file.name} is not a gif, jpeg, or png image file")

    progress: (e, data) ->
      if data.context
        progress = parseInt(data.loaded / data.total * 100, 10)
        data.context.find('.bar').css('width', progress + '%')

    done: (e, data) ->
      file = data.files[0]
      domain = $('#fileupload').attr('action')
      path = $('#fileupload input[name=key]').val().replace('${filename}', file.name)
      to = $('#fileupload').data('post')
      content = {}
      content[$('#fileupload').data('as')] = domain + path
      $.post(to, content)
      data.context.remove() if data.context # remove progress bar

    fail: (e, data) ->
      alert("#{data.files[0].name} failed to upload.")
      console.log("Upload failed:")
      console.log(data)

My upload_helper.rb（路径：应用程序/助手）http://pastebin.com/VxAbiUft http://pastebin.com/VxAbiUft

module UploadHelper
  def s3_uploader_form(options = {}, &block)
    uploader = S3Uploader.new(options)
    form_tag(uploader.url, uploader.form_options) do
      uploader.fields.map do |name, value|
        hidden_field_tag(name, value)
      end.join.html_safe + capture(&block)
    end
  end

  class S3Uploader
    def initialize(options)
      @options = options.reverse_merge(
        id: "fileupload",
        aws_access_key_id: ENV["AWS_ACCESS_KEY_ID"],
        aws_secret_access_key: ENV["AWS_SECRET_ACCESS_KEY"],
        bucket: ENV["AWS_S3_BUCKET"],
        acl: "public-read",
        expiration: 10.hours.from_now,
        max_file_size: 2.megabytes,
        as: "file"
      )
    end

    def form_options
      {
        id: @options[:id],
        method: "post",
        authenticity_token: false,
        multipart: true,
        data: {
          post: @options[:post],
          as: @options[:as]
        }
      }
    end

    def fields
      {
        :key => key,
        :acl => @options[:acl],
        :policy => policy,
        :signature => signature,
        "AWSAccessKeyId" => @options[:aws_access_key_id],
      }
    end

    def key
      @key ||= "uploads/#{SecureRandom.hex}/${filename}"
    end

    def url
      "https://#{@options[:bucket]}.s3.amazonaws.com/"
    end

    def policy
      Base64.encode64(policy_data.to_json).gsub("\n", "")
    end

    def policy_data
      {
        expiration: @options[:expiration],
        conditions: [
          ["starts-with", "$utf8", ""],
          ["starts-with", "$key", ""],
          ["content-length-range", 0, @options[:max_file_size]],
          {bucket: @options[:bucket]},
          {acl: @options[:acl]}
        ]
      }
    end

    def signature
      Base64.encode64(
        OpenSSL::HMAC.digest(
          OpenSSL::Digest::Digest.new('sha1'),
          @options[:aws_secret_access_key], policy
        )
      ).gsub("\n", "")
    end
  end
end

The _form.html.erb: http://pastebin.com/Sqk8XK6U http://pastebin.com/Sqk8XK6U

And the 创建.js.erb ( the @image变量来自控制器 - 我认为它与发布控制器逻辑无关，因为它是一个 javascript 问题）http://pastebin.com/BBAGE5Me http://pastebin.com/BBAGE5Me

因此，我想在上传到 S3 之前调整图像大小以创建缩略图，这样我就不会浪费 S3 上的存储和客户端的带宽。任何想法？

我已经尝试将相应的选项添加到帖子.js.咖啡脚本：https://github.com/blueimp/jQuery-File-Upload/wiki/Options https://github.com/blueimp/jQuery-File-Upload/wiki/Options但没有取得成功。

如果您之前检查过，您会发现其他类似的帖子。

看来 add 回调会导致 process 函数被忽略，因此您必须在 add 回调中手动调用它。此外，您没有定义任何用于在代码中调整大小的选项...

我发布了一个类似的问题，并在一番尝试后自己解决了：将 jquery fileupload 与 CoffeeScript 一起使用 - 使用添加回调时调整图像大小 https://stackoverflow.com/questions/22753646/using-jquery-fileupload-with-coffeescript-resizing-image-when-using-add-callba