使用带有咖啡脚本的jquery fileupload - 使用添加回调时调整图像大小 [英] Using jquery fileupload with coffeescript - resizing image when using add callback

问题描述

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

SOLVED It 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 文件上传器，并且我已经设法让一切正常，但调整大小.

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.

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

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);

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

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文件:

edit forgot 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原来在application.js中加载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 - 使用添加回调时调整图像大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！