代码之家  ›  专栏  ›  技术社区  ›  Sean Kelley

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

  •  1
  • Sean Kelley  · 技术社区  · 10 年前

    我遵循了这一操作,并将全尺寸图像保存到S3: https://github.com/uploaders/direct-aws-sdk-rails-4.2

    但我很难先调整照片的大小。当加载具有输入表单的视图时,我在chrome控制台上遇到一个js错误。

    未捕获类型错误:无法读取与以下两个文件相关的未定义属性“fileupload”:

    jquery.filepload-process var originalAdd=$.blueimp.filepload.prototype.options.add; 和 jquery.filepload-image $.blueimp.filepload.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文件有关。我已将列出的文件的源放在:

    供应商/资产/javascript

    并在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
    

    我可以再次上传,但没有调整大小。

    1 回复  |  直到 10 年前
        1
  •  1
  •   Sean Kelley    10 年前

    我终于发现jquery.filepload-process和jquery.filepload-image需要在jquery.fhilepload之后加载(我在没有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。