使用jquery fileupload with coffeescript - 使用add回调时调整图像大小

问题描述

SOLVED
原来，在application.js中加载的js的顺序是错误的：

SOLVEDIt turns out the order of the js being loaded in the application.js were wrong:

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 fileuploader，我设法得到一切工作，但调整大小。

I'm trying to use BlueImp's jquery fileuploader and I've managed to get everything working but the resizing.

我试图调整添加回调的图片大小，然后提交以避免任何服务器端处理。

I'm trying to resize the images on the add callback and then submitting to avoid any server side processing.

我知道使用add回调导致过程函数被跳过，但我在add回调函数中手动调用它，它应该工作，但它不工作。

I know using the add callback causes the process function to be skipped, but I called that manually in the add callback itself and it should work but it doesn't.

这是我的代码：

$('.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);

任何帮助将非常感谢，因为我一直在我的头撞在桌子上2天直接通过这个！

any help over this would be greatly appreciated, as I've been banging my head on the table for 2 days straight over this!

编辑
忘记提及，这里是我的js文件：

editforgot to mention, here's my js files:

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

推荐答案

SOLVED原来，js正在加载到application.js错误：

SOLVED It turns out the order of the js being loaded in the application.js were wrong:

原始：

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

这篇关于使用jquery fileupload with coffeescript - 使用add回调时调整图像大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！