如何使用jquery文件上传调整客户端图像的大小

我通过jquery-fileupload-rails gem在Rails 3.2应用程序中使用blueimp jquery-file-upload 。

我正在尝试在上传之前在客户端调整图像大小，但是在遵循文档时遇到了问题。 我的代码如下。 目前上传工作完美，但图片未resize。

通过jquery-file-upload调整图像大小的正确语法是什么。

（基于此和本文档的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

但是我在制定正确的语法或理解可用的指南时遇到了很多麻烦。

如何将resize处理应用于添加回调中的每个文件？

我通过在add回调中调用进程来解决它，如下所示： 

 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

如果仍然相关 – 我发现一旦你使用add回调，你有责任添加你需要的任何处理阶段。 因此，如果您删除添加回调，它将使用您的设置调整图像大小。 你应该做的是将resize处理设置注册到add函数中的每个文件

希望有所帮助

我无法让图像resize工作。 最后我又开始了。 我已将图像大小调整添加到现有的工作文件上传代码中。 对我来说，正是自定义添加阻碍了resize。 一旦我删除了自定义添加，它就是hunky-dorey。 只是想把它放在那里为了其他斗士的利益。

Interesting Posts