jQuery 在 Rails 4 中上传文件并调整图像大小

Question

我已遵循此操作方法并将全尺寸图像保存到 S3： https://github.com/uploaders/direct-aws-sdk-rails-4.2

但我无法先调整照片大小。加载具有输入表单的视图时，chrome 控制台出现 js 错误。

未捕获类型错误：无法读取与这两个文件相关的未定义的属性 'fileupload'：

jquery.fileupload-进程 var originalAdd = $.blueimp.fileupload.prototype.options.add; 和 jquery.fileupload-图片 $.blueimp.fileupload.prototype.options.processQueue.unshift(

我正在复制粘贴此处列出的 js 文件： https://github.com/blueimp/jQuery-File-Upload/wiki/Client-side-Image-Resizing

我上传的 JS 看起来像：

...
fileInput.fileupload({
  fileInput:       fileInput,
  url:             "http://" + s3params.url.host,
  type:            'POST',
  autoUpload:       true,
  formData:         s3params.fields,
  paramName:        'file', // S3 does not like nested name fields i.e. name="user[avatar_url]"
  dataType:         'XML',  // S3 returns XML if success_action_status is set to 201
  replaceFileInput: false,
  disableImageResize: false,
  disableImageResize: /Android(?!.*Chrome)|Opera/ 
    .test(window.navigator && navigator.userAgent),
  imageMaxWidth: 800,
  imageMaxHeight: 800,
  imageCrop: true, // Force cropped images    
...

我认为我的困惑可能与我在项目中包含 javascript 文件的方式有关。我已将列出文件的来源放在我的：

vendor/assets/javascripts

并在 application.js 中引用它们，如下所示：

//= require jquery
//= require jquery_ujs
//= require turbolinks

//= require jquery.ui.widget
//= require load-image.all.min
//= require jquery.fileupload-image
//= require canvas-to-blob.min
//= require jquery.iframe-transport
//= require jquery.fileupload-process
//= require z.jquery.fileupload
//= require_tree .

如果我删除：

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

我可以重新上传，但没有调整大小。

Answer 1

我终于弄明白 jquery.fileupload-process 和 jquery.fileupload-image 需要在 jquery.fileupload 之后加载（我重命名没有 z.）并更改了加载顺序：

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery.ui.widget
//= require load-image.all.min
//= require canvas-to-blob.min
//= require jquery.iframe-transport
//= require jquery.fileupload
//= require jquery.fileupload-process
//= require jquery.fileupload-image

//= require_tree .

jQuery 在 Rails 4 中上传文件并调整图像大小

jQuery File Upload in Rails 4 with Image Resizing

ruby-on-rails

jquery-file-upload