3

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

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

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

（coffeescript 中显示的两种方法基于this和this documentation。都不适合我。）

#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

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

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

4

3 回答 3

9

我通过在 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
于 2014-03-31T07:04:45.500 回答
1

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

希望有帮助

于 2014-01-13T12:29:00.777 回答
1

我在调整图像大小时遇到​​了麻烦。最后我又开始了。我已将图像调整大小添加到现有的工作文件上传代码。对我来说，阻碍调整大小的是自定义添加。一旦我删除了自定义添加，它就是 hunky-dorey。只是想把它放在那里，以使其他奋斗者受益。

于 2014-10-24T00:49:12.963 回答