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

Question

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

ruby-on-railsjquery-file-uploadblueimpjquery-fileupload-rails

3

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

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

如何使用jquery-file-upload正确调整图像大小？

（基于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

编辑

根据Matanza的回答，我代码中的add回调会阻止任何处理函数自动调用。因此我需要做一些类似以下的操作：

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

但是我在确定正确的语法或理解可用指南方面遇到了很多麻烦。在add回调中如何将resize处理应用于每个文件？

- Andy Harvey

3个回答

1

我在使用图片缩放时遇到了困难。最终我重新开始了。我将图片缩放添加到了一个已经工作的文件上传代码中。对我而言，是自定义添加阻碍了缩放。一旦我删除了自定义添加，一切都很顺利。只是想为其他遇到困难的人提供帮助。

- Rufyan

1

如果这仍然相关- 我发现一旦使用添加回调，您需要添加所需的任何处理阶段。因此，如果删除添加回调，则会使用您的设置调整图像大小。您应该在添加功能中为每个文件注册调整大小的处理设置。希望这有所帮助。

- Matanza

谢谢你的帮助！你有一个注册调整大小处理设置的示例吗？ - codesw1tch

1

嗨 @matanza，我仍然在努力理解在添加回调中处理文件的语法。您能提供一个代码示例吗？我想我需要像 add: (e, data) -> $.each data.result, (index, file) -> // process code goes here 这样的东西。但是处理代码看起来像什么？ - Andy Harvey

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- dannio · Accepted Answer

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