使用带有咖啡脚本的jquery fileupload - 使用添加回调时调整图像大小答案

【问题标题】：Using jquery fileupload with coffeescript - resizing image when using add callback使用带有咖啡脚本的jquery fileupload - 使用添加回调时调整图像大小
【发布时间】：2014-05-10 07:46:42
【问题描述】：

已解决 原来在application.js中加载js的顺序是错误的：

original:
//= require jquery-fileupload/jquery.fileupload-process
//= require jquery-fileupload/jquery.fileupload-image
//= require jquery-fileupload/jquery.fileupload-validate

correct version:
//= require jquery-fileupload/jquery.fileupload-process
//= require jquery-fileupload/jquery.fileupload-validate
//= require jquery-fileupload/jquery.fileupload-image

我正在尝试使用 BlueImp 的 jquery 文件上传器，并且我已经设法让一切正常，但调整大小。

我正在尝试在添加回调中调整图像大小，然后提交以避免任何服务器端处理。

我知道使用添加回调会导致流程函数被跳过，但我在添加回调本身中手动调用了它，它应该可以工作，但它没有。

这是我的代码：

$('.jquery-fileupload').fileupload
  dataType: "script"
  imageMaxWidth: 480
  imageMaxHeight: 360
  disableImageResize: false
  autoUpload: false
  process:[
    {
      action: 'load',
      fileTypes: /^image\/(gif|jpeg|png)$/,
      maxFileSize: 20000000
    },
    {
      action: 'resize',
      maxWidth: 480, // the images are to be loaded into a pdf later so they have to be skept small
      maxHeight: 360,
      minWidth: 480,
      minHeight: 360
    },
    {
      action: 'save'
    }
  ]
  progress: (e, data) ->
    progress = parseInt(data.loaded / data.total * 100, 10);
    $('#progress_'+data.formData.token+' .bar').css('width', progress+'%')

  add: (e, data) ->
    unique_token = token();
    if (data.files && data.files[0])
      if(data.files[0].size < 200000000)
        if(data.files[0].type.substr(0, data.files[0].type.indexOf('/')) != 'image')
          alert("Please upload a file with the correct format")
        else
          current_data = $(this)
          data.process(->
            return current_data.fileupload('process', data); //call the process function
          ).done(->
            data.formData = {token: unique_token};
            data.context = $('.preview:last');
            data.context.find('.abort').click(abortUpload);
            xhr = data.submit();
            data.context.data('data',{jqXHR: xhr});
          )
      else
        alert("one of your files is over 200MB")
  done: (e, data) ->
    console.log(data);

对此的任何帮助将不胜感激，因为这两天我一直在敲桌子！

编辑忘了说，这是我的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-image
//= require jquery-fileupload/jquery.fileupload-validate
//= require jquery-fileupload/vendor/tmpl
//= require jquery-fileupload/locale

【问题讨论】：

不不，这不是真正的缩进。如果是这样，我会在 rails 中遇到错误。
如果你解决了这个问题，你应该发布一个答案并标记它。不确定您在编辑部分的开头或末尾放置的顺序是否正确。
这真的很有帮助，感谢这篇文章，我得到了处理工作。现在我发现多次上传不起作用。你知道如何让它发挥作用吗？
糟糕，我在unless 中有一些代码不应该缩进那么远。您的代码运行良好，非常感谢！
@dannio 将您的解决方案放入答案中并接受它，这样它就不会无人回答，因此保持干净；)

标签： jquery coffeescript resize jquery-file-upload

【解决方案1】：

已解决原来在application.js中加载js的顺序是错误的：

原文：

//= require jquery-fileupload/jquery.fileupload-process
//= require jquery-fileupload/jquery.fileupload-image
//= require jquery-fileupload/jquery.fileupload-validate

正确版本：

//= require jquery-fileupload/jquery.fileupload-process
//= require jquery-fileupload/jquery.fileupload-validate
//= require jquery-fileupload/jquery.fileupload-image

【讨论】：

这没有提供问题的答案。要批评或要求作者澄清，请在他们的帖子下方发表评论 - 您可以随时评论自己的帖子，一旦您有足够的reputation，您就可以comment on any post。