ruby-on-rails之如何使用jquery文件上传调整图像客户端的大小

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

我试图在上传之前在客户端调整图像大小，但在遵循文档时遇到问题。我的代码如下。目前上传工作正常，但图像没有调整大小。

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

(coffeescript 中显示了基于 this 和 this 文档的两种方法。这两种方法都不适合我。)

#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 

编辑

根据马坦萨的回答， add我的代码中的回调会阻止自动调用任何处理函数。所以我假设我需要做类似的事情

... 
add: (e, data) ->  
  $.each data.result, (index, file) -> 
    // processing code goes here 

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

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

请您参考如下方法:

我通过在 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