我已经在互联网上看到了一些例子,比如:这个和这个,但我正在遵循RailsCast第383集上传到Amazon S3,在视频的最后他提到使用JavaScript在客户端对图像进行调整大小。
问题是,如果我按照他的示例实施,我无法实现。我正在使用gemjquery-fileupload-rails 编辑: 我注意到在JQuery-fileupload示例中,我缺少一些必需的JS代码用于调整大小的页面,但仍然无法正常工作。 我的application.js要求:
我已经尝试将相应选项添加到 posts.js.coffee 脚本中:https://github.com/blueimp/jQuery-File-Upload/wiki/Options,但没有取得成功。
问题是,如果我按照他的示例实施,我无法实现。我正在使用gemjquery-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
My posts.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,但没有取得成功。