Question

我正在尝试在上传到服务器之前调整图片大小，以便添加到我的网站。我正在使用Ruby-on-Rails，我使用的基础是基于RailsCasts Episode #381: jQuery File Upload的代码，并尝试添加我在以下链接中找到的内容： https://github.com/blueimp/jQuery-File-Upload/wiki/Client-side-Image-Resizing
Using jquery fileupload with coffeescript - resizing image when using add callback
How to resize images client side using jquery file upload

这是我的代码（paintings.js.coffee）：

jQuery ->
  $('#fileupload').fileupload
    imageMaxWidth: 100
    imageMaxHeight: 100
    disableImageResize: false
    imageCrop: true
    process:[
      {
        action: "load"
        fileTypes: /(\.|\/)(gif|jpe?g|png)$/i #/^image\/(gif|jp?g)$/
        maxFileSize: 20000 # 20KB
      },
      {
        action: "resize"
        imageMaxWidth: 100
        imageMaxHeight: 100
      },
      {
        action: "save"
      }
      ]
    add: (e, data) ->
      types = /(\.|\/)(gif|jpe?g|png)$/i
      file = data.files[0]
      if types.test(file.type) || types.test(file.name)
        #data.context = $(tmpl("template-upload", file))
        #$('#fileupload').append(data.context)
        current_data = $(this)
        data.process(->
          return current_data.fileupload('process', data);
        ).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("#{file.name} is not a gif, 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 + '%')

    done: (e, data) ->
      file = data.files[0]
      domain = $('#fileupload').attr('action')
      path = $('#fileupload input[name=key]').val().replace('${filename}', file.name)
      to = $('#fileupload').data('post')
      content = {}
      content[$('#fileupload').data('as')] = domain + path
      $.post(to, content)
      data.context.remove() if data.context # remove progress bar

    fail: (e, data) ->
      alert("#{data.files[0].name} failed to upload.")
      console.log("Upload failed:")
      console.log(data)

这是我的代码（application.js）：

//= require jquery
//= require jquery_ujs
//= require jquery-fileupload/basic
//= 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_tree .

以下是与Gemfile相关的部分：

  gem 'jquery-fileupload-rails'
  gem 'jquery-file-upload-railed'

我需要包含

gem 'jquery-file-upload-railed'

由于application.js上的要求：

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

结果：我收到了这个错误：

未捕获TypeError：对象＃没有方法'_super'。

在文件上：

jquery.fileupload-process.js体= 1：165

164 _create: function () {
165     this._super();
166     this._processing = 0;
167     this._processingQueue = $.Deferred().resolveWith(this)
168         .promise();
169 }

由于问题似乎出现在文件：jquery.fileupload-process.js上，我删除了3个要求，这取决于gem'jquery-file-upload-railed'。从application.js中删除行：

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

我也删除了Gemfile中的gem：

gem 'jquery-file-upload-railed'

然后我又出了一个错误：

未捕获的TypeError：对象＃没有方法'进程'

在文件上：

paintings.js体= 1：28

 22 add: function(e, data) {
 23   var current_data, file, types;
 24   types = /(\.|\/)(gif|jpe?g|png)$/i;
 25   file = data.files[0];
 26   if (types.test(file.type) || types.test(file.name)) {
 27     current_data = $(this);
 28     return data.process(function() {
 29       return current_data.fileupload('process', data);
 30     }).done(function() {
 31       var xhr;
 32       data.formData = {
 33         token: unique_token
 34       };
 35       data.context = $('.preview:last');
 36       data.context.find('.abort').click(abortUpload);
 37       xhr = data.submit();
 38       return data.context.data('data', {
 39         jqXHR: xhr
 40       });
 41     });
 42   } else {
 43     return alert("" + file.name + " is not a gif, jpeg, or png image file");
 44   }
 45 },

然后我决定从paintins.js.coffee文件中更改add：callback。之前：

add: (e, data) ->
  types = /(\.|\/)(gif|jpe?g|png)$/i
  file = data.files[0]
  if types.test(file.type) || types.test(file.name)
    #data.context = $(tmpl("template-upload", file))
    #$('#fileupload').append(data.context)
    current_data = $(this)
    data.process(->
      return current_data.fileupload('process', data);
    ).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("#{file.name} is not a gif, jpeg, or png image file")

后：

add: (e, data) ->
  types = /(\.|\/)(gif|jpe?g|png)$/i
  file = data.files[0]
  if types.test(file.type) || types.test(file.name)
    #data.context = $(tmpl("template-upload", file))
    #$('#fileupload').append(data.context)
    current_data = $(this)
    current_data.fileupload('process', data);
    data.submit();
  else
    alert("#{file.name} is not a gif, jpeg, or png image file")

结果：现在上传到S3工作。但它不是客户端调整大小的图像。任何人都可以帮助我。文档非常缺乏，我一直在根据其他人的经验工作，但到目前为止，他们都没有帮助过我。

提前致谢。

Ruby on Rails - 客户端在使用JQuery上传到服务器之前调整图像大小

0 个答案: