[英]Resizing image at client-side using JQuery file upload to amazon S3
我已经在互联网上看到了一些示例,例如: this和this ,但是我正在跟踪RailsCast Episode#383 Uploading to Amazon S3 ,在视频的最后,他提到了使用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
我的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但没有成功。
如果您之前检查过,就会发现其他类似的帖子。
似乎add回调导致process函数被忽略,因此您必须在add回调中手动调用它。 另外,您没有定义任何用于调整代码大小的选项...
我发布了一个类似的问题,并在玩了一会后自己解决了: 使用jquery fileupload与coffeescript-使用add回调时调整图像大小
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.