我在Rails 3.2应用中通过blueimp jquery-file-upload gem使用jquery-fileupload-rails。
我正在尝试在上传之前在客户端调整图片大小,但是在阅读文档时遇到了问题。我的代码如下。目前上传工作完美,但图片没有调整大小。
通过jquery-file-upload调整图像大小的正确语法是什么。
(基于this和this文档的coffeescript中显示的两种方法。对我来说都不适用。)
#Coffeescript
jQuery ->
if $("#new_asset").length
$("#new_asset").fileupload
dataType: "script"
add: (e, data) ->
types = /(\.|\/)(jpe?g|png)$/i
file = data.files[0]
if types.test(file.type) || types.test(file.name)
data.context = $(tmpl("template-upload", file))
$('#progress-container').append(data.context)
jqXHR = data.submit()
$("button.cancel").click (e) ->
jqXHR.abort()
else
alert("#{file.name} is not a 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 + '%')
stop: (e, data) ->
$('.upload').hide()
process: [
action: "load"
fileTypes: /^image\/(gif|jp?g)$/
maxFileSize: 20000000 # 20MB
,
action: "resize"
imageMaxWidth: 1500
imageMaxHeight: 1500
,
action: "save"
]
dropZone: $(".dropzone")
sequentialUploads: true
disableImageResize: /Android(?!.*Chrome)|Opera/.test(window.navigator and navigator.userAgent)
imageMaxWidth: 1500
imageMaxHeight: 1500
downloadTemplateId: null
#application.js
//= require jquery-fileupload
修改
根据Matanza的回答,我的代码中的add
回调会阻止自动调用任何处理函数。所以我假设我需要做一些像
...
add: (e, data) ->
$.each data.result, (index, file) ->
// processing code goes here
但是我在制定正确的语法或理解可用的指南时遇到了很多麻烦。
如何将调整大小处理应用于添加回调中的每个文件?
答案 0 :(得分:9)
我通过在add callback中调用进程来解决它,如下所示:
add: (e, data) ->
current_data = $(this)
data.process(->
return current_data.fileupload('process', data);
).done(->
data.submit();
)
还要记得在application.js中以正确的顺序加载你的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/jquery.fileupload-ui
//= require jquery-fileupload/jquery.fileupload-process
//= require jquery-fileupload/jquery.fileupload-validate
//= require jquery-fileupload/jquery.fileupload-image
答案 1 :(得分:1)
如果仍然相关 - 我发现一旦你使用了add callback,你有责任添加你需要的任何处理阶段。因此,如果您删除添加回调,它将使用您的设置调整图像大小。 你应该做的是将调整大小处理设置注册到添加功能
中的每个文件希望有所帮助
答案 2 :(得分:1)
我无法让图片调整大小工作。最后我又开始了。我已将图像大小调整添加到现有的工作文件上传代码中。对我来说,这是一个阻碍调整大小的自定义添加。一旦我删除了自定义添加,它就是hunky-dorey。只是想把它放在那里为了其他斗士的利益。