3

jquery-fileupload-rails gemを介して、Rails 3.2 アプリでblueimp jquery-file-uploadを使用しています。

アップロードする前にクライアント側で画像のサイズを変更しようとしていますが、ドキュメントに従うのに問題があります。私のコードは以下です。現在、アップロードは完全に機能していますが、画像のサイズは変更されていません。

jquery-file-upload を介して画像のサイズを変更する正しい構文は何ですか。

（これとこのドキュメントに基づいてコーヒースクリプトに示されている2つのアプローチ。どちらも私にはうまくいきません。）

#Coffeescript

jQuery ->
  if $("#new_asset").length
    $("#new_asset").fileupload 
      dataType: "script"
      add: (e, data) ->
        types = /(\.|\/)(jpe?g|png)$/i
        file = data.files[0]
        if types.test(file.type) || types.test(file.name)
          data.context = $(tmpl("template-upload", file))
          $('#progress-container').append(data.context)
          jqXHR = data.submit()
          $("button.cancel").click (e) ->
            jqXHR.abort()
        else
          alert("#{file.name} is not a 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 + '%')
      stop: (e, data) ->
        $('.upload').hide()
      process: [
        action: "load"
        fileTypes: /^image\/(gif|jp?g)$/
        maxFileSize: 20000000 # 20MB
      ,
        action: "resize"
        imageMaxWidth: 1500
        imageMaxHeight: 1500
      ,
        action: "save"
      ]
      dropZone: $(".dropzone")
      sequentialUploads: true
      disableImageResize: /Android(?!.*Chrome)|Opera/.test(window.navigator and navigator.userAgent)
      imageMaxWidth: 1500
      imageMaxHeight: 1500
      downloadTemplateId: null

#application.js
//= require jquery-fileupload

編集

Matanza の回答によるとadd、私のコードのコールバックは、処理関数が自動的に呼び出されるのを防ぎます。だから私は次のようなことをする必要があると思います

...
add: (e, data) -> 
  $.each data.result, (index, file) ->
    // processing code goes here

しかし、正しい構文を理解したり、利用可能なガイドを理解するのに苦労しています。

add コールバックで各ファイルにサイズ変更処理を適用するにはどうすればよいですか?

4

3 に答える 3

9

次のように add コールバック内でプロセスを呼び出すことで解決しました。

add: (e, data) ->
  current_data = $(this)
  data.process(->
    return current_data.fileupload('process', data);
  ).done(->
    data.submit(); 
  )

また、application.js で正しい順序で JS ファイルをロードすることも忘れないでください (これは私の人生の数時間を無駄にしました):

//= 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-validate
//= require jquery-fileupload/jquery.fileupload-image
于 2014-03-31T07:04:45.500 に答える
1

それがまだ関連している場合- add コールバックを使用したら、必要な処理ステージを追加するのはあなたの責任であることがわかりました。そのため、 add コールバックを削除すると、設定で画像のサイズが変更されます。やるべきことは、リサイズ処理の設定を各ファイルにadd関数に登録することです

それが役立つことを願っています

于 2014-01-13T12:29:00.777 に答える
1

画像のサイズ変更が機能しませんでした。結局また始めました。既存の作業ファイルのアップロード コードに画像のサイズ変更を追加しました。私にとって、サイズ変更を妨げていたのはカスタム追加でした。カスタム追加を削除すると、それは厄介なものでした. 他の闘争者の利益のためにそこに出したかっただけです。

于 2014-10-24T00:49:12.963 に答える