3

私はcloudinaryここですべてを使用してフォローしています: http://cloudinary.com/blog/direct_image_uploads_from_the_browser_to_the_cloud_with_jquery

これは私の見解hamlです：

= form_tag items_path do
  = cl_image_upload_tag(:image_id, :crop => :limit, :width => 1000, :height => 1000)
  = submit_tag 'Submit'

確認したところ、すべての cloudinary JavaScript が読み込まれています。ボタンはファイルを cloudinary にアップロードしており、Chrome コンソールには次のように表示されます。

XHR finished loading: "https://api.cloudinary.com/v1_1/hhfk6ki1i/auto/upload". jquery.js:8417
send jquery.js:8417
jQuery.extend.ajax jquery.js:7969
send jquery.fileupload.js:600
$.widget._onSend jquery.fileupload.js:656
newData.submit jquery.fileupload.js:695
$.widget.options.add jquery.fileupload.js:137
$.Widget._trigger jquery.ui.widget.js:278
(anonymous function) jquery.fileupload.js:698
jQuery.extend.each jquery.js:612
$.widget._onAdd jquery.fileupload.js:688
$.widget._onChange jquery.fileupload.js:752
jQuery.event.dispatch jquery.js:3064
elemData.handle.eventHandle

ファイルを選択すると、アップロードしたファイルの名前がボタンに表示されると思います。それは cloudinary プラグインのおかげで起こるべきことですか、それともすべての Javascript を実装してそのイベントをキャプチャし、アップロード タグを変更する必要がありますか?

私は、常に「ファイルが選択されていません」と表示されるこのボタンについて話しています (ファイルがアップロードされ、Cloudinary で利用可能になった後でも):

ここに画像の説明を入力

ところで：それが関連している場合。私は使っていませんしcarrierwave、Attachinary一緒に仕事をしているからでもありませんcouchrest_model

4

2 に答える 2

4

アップロードの開始時に入力フィールドを置き換える動作は、次を実行することで無効にできます。

$('.cloudinary-fileupload').fileupload('option', 'replaceFileInput', false);

アップロードが完了すると、cloudinarydone のコールバックが呼び出されます。フィールドが開始されるとすぐに（入力フィールドがリセットされたときに）フィールドを非表示にする場合は、次を使用できます。

$('.cloudinary-fileupload').bind('fileuploadchange', function() { $(this).hide()})
于 2013-01-18T12:45:00.070 に答える
2

ブラウザから Cloudinary への jQuery ベースの直接画像アップロードを使用する場合、アップロード プロセスは、ファイル入力フィールドを使用して画像を選択またはドラッグした直後に開始されます。直接アップロードされた画像の識別子でフォームが更新されます。

デフォルトでは、アップロード完了後に新規ファイル入力欄が表示されるため、ファイル名は表示されません。

関連するブログ投稿の下にcloudinarydoneあるサンプル コードに示すように、イベントにバインドできます。このイベントを受け取ると、ファイル入力フィールドを非表示にして、アップロードされた画像のプレビュー サムネイルを表示できます。Other development frameworks and advanced usage

于 2013-01-16T17:53:19.163 に答える