使用JQuery文件上传到amazon S3，在客户端调整图像大小
我已经在互联网上看到了一些例子： 这个和这个 ，但是我正在关注RailsCast剧集＃383上传到Amazon S3 ，在video的最后他提到了使用javascript在客户端调整图像大小， 当然。 问题是，如果我按照他的例子，我无法实施。 我正在使用gem jquery-fileupload-rails
编辑 ：我注意到我在JQuery-fileupload示例中缺少一些JS 来调整图像页面的大小 ，但仍然没有工作。 我对application.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 我的post.js.coffee 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)
我的upload_helper.rb （路径：apps / helpers） 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
_form.html.erb : http : //pastebin.com/Sqk8XK6U
而create.js.erb （ @image变量来自控制器 – 我不认为它与发布控制器逻辑有关，因为它是一个javascript问题） http://pastebin.com/BBAGE5Me
所以我想在上传到S3之前调整图像大小以创建缩略图，因此我不会将我的存储浪费在S3和带宽到客户端上。 任何的想法？
我已经尝试将这些相应的选项添加到posts.js.coffee脚本： https ： //github.com/blueimp/jQuery-File-Upload/wiki/Options但是没有成功。
如果你之前检查过，你会发现其他类似的post。
似乎add回调会导致忽略过程函数，因此您必须在add回调中手动调用它。 此外，您没有为代码中的大小调整定义任何选项…
我发布了一个类似的问题并在一些游戏后自己解决了： 使用jquery fileupload和coffeescript – 在使用add callback时调整图像大小