如何使用jquery文件上传来调整图像客户端的大小 [英] How to resize images client side using jquery file upload

问题描述

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

I am using blueimp jquery-file-upload in a Rails 3.2 app, via the jquery-fileupload-rails gem.

我正在尝试在上传之前在客户端上调整图像的大小，但是在遵循文档时遇到了麻烦.我的代码如下.当前上传效果理想，但是图像没有调整大小.

I am trying to resize images on the client side prior to uploading, but am having trouble following the documentation. My code is below. Currently uploading works perfectly, but the images are not resized.

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

What is the correct syntax to resize images via jquery-file-upload.

(根据此，咖啡脚本中显示的两种方法和

(Two approaches shown in the coffeescript based on this and this documentation. Neither works for me.)

#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回调阻止了任何处理函数被自动调用.所以我认为我需要做类似的事情

According to Matanza's answer, the add callback in my code prevents any processing functions from being called automatically. So I assume I need to do something like

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

但是在制定正确的语法或使可用的指南有意义时，我遇到了很多麻烦.

But I'm having a lot of trouble working out the correct syntax or making sense of the guides that are available.

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

How do I apply the resize processing to each file in the add callback?

推荐答案

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

I solved it by calling the process within the add callback like so:

add: (e, data) ->
  current_data = $(this)
  data.process(->
    return current_data.fileupload('process', data);
  ).done(->
    data.submit(); 
  )

还记得以正确的顺序将JS文件加载到application.js ...中.(这浪费了我几个小时的时间):

also remember to load your JS files in the right order in application.js....(this wasted several hours of my life):

//= 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

这篇关于如何使用jquery文件上传来调整图像客户端的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！