問題タブ [jquery-file-upload]

iFrame を含むいくつかのトランスポートがあることは知っていますが、一部のブラウザーは進行状況の更新をサポートしていません。

私が知りたいのは、リクエストを発行する前に、jquery-file-upload が使用しているトランスポートを検出する方法があるかどうか、またはアップロードの進行状況がサポートされているかどうかです。

現時点では、最初のプログレス コールバックを待って、そのイベントでカスタムのプログレス バー スタイルを交換する必要があります。プログレス イベントを受け取ることがわかっている場合は、最初から空のプログレス バーを使用できるようにしたいと考えています。

プラグインへのリンクhttp://blueimp.github.io/jQuery-File-Upload/

ここに埋もれているいくつかの小さな関連する質問がありますが、それらは実際には 1 つの大きな毛むくじゃらのベスト プラクティスの質問を示しています。これは、一度にいくつかのトリッキーなことを行うことになっているため、実装するのが難しい機能です...

• ドラッグ アンド ドロップの複数ファイル アップローダ (Javascript 経由)
• 複数ページのフォーム (1 ページ目: ファイルをアップロードして既存のドキュメント モデルに関連付ける。2 ページ目: ファイル/ドキュメント オブジェクトとメタデータを更新してデータベースに保存する)

...そして、既存のコード サンプルや実装はどこにも見つかりませんでした。(アプローチによっては、テーブルから一掃するか、関連/埋め込み/フォローオンのすべての質問に自動的に回答することができます。) 要するに、この投稿の目的は、次の質問に回答することです。介在する質問/問題？

ファイルをアップロードするために、DjangoでドラッグアンドドロップのJQuery File Uploaderのこの実装を使用しています...

https://github.com/miki725/Django-jQuery-File-Uploader-Integration-demo

上記でリンクしたソリューションでは、もちろんファイル システムにファイルを保存しますが、ファイルのバッチごとにディレクトリを作成し、それらの各ディレクトリに UUID を割り当てることで、アップロード セッションごとにバッチで保存します。ファイルシステム上の一意の名前が付けられた各ディレクトリには、その特定のアップロード セッション中にアップロードされたファイルが含まれます。つまり、どのような種類のデータベース ストレージ メソッドでも、最初に、このソリューションによって各アップロード セッション用に作成されたファイル システム ディレクトリ内のすべてのファイルをばらばらにして繰り返し処理する必要があります。

注: 上記にリンクされている JQuery ソリューションは、アプリ ディレクトリ内のフォーム (forms.py 内) を使用しません。フォームはテンプレートにハードコードされていますが、これはすでに少し残念です...なぜなら、各バッチ内の上記の各ファイルをフォームにバインドする良い方法も見つけなければならないからです。

最も単純な方法は、おそらく最もパフォーマンスの低いソリューションではあると思いますが、2 つのフォームに対して 2 つのビューを作成し、最初のページのビューで各ファイルをデータベースに保存してから、2 番目のページでデータベースを更新することです。これが私が現在転がっている方向です：

テンプレートで...

ビューで.PY...

# POST (アップロード ハンドラ内。アップロード アクションによってトリガーされるリクエスト)

# GET (同じアップロード ハンドラ内)

最初のページのこのビューは、JQuery アップローダーを活用しています。これは、セッションごとの複数ファイルのアップロードに最適で、本来の機能を果たします。ただし、上で示唆したように、アップロード ハンドラとしてのビューは、2 ページ フォームにする必要があるものの最初のページにすぎません。2 ページ目では、エンド ユーザーはアップロードされた各ファイルを取得し、1 ページ目でアップロードしたばかりのファイルに追加データを添付して、データベースに再度保存する必要があります。

フォーム ウィザードやジェネリック クラス ベースのビューなど、さまざまなソリューションを使用して、これを 2 部構成のフォームとして機能させようとしました。以下の例では、主にセッションを介してデータの永続性を有効にしています。これらのソリューションは、かなり厄介なものになります。

要約すると、私はする必要があります...

• 一意に識別されたバッチで複数のファイルをアップロードします (ドラッグ アンド ドロップを使用)。
• アップロードされたファイルの各バッチを分解して繰り返します
• バッチ内の各ファイルをフォームにバインドし、既存のドキュメント モデルに関連付けます
• これらすべてのファイルを一度にデータベースに送信/保存します
• 新しい可能性があるフォームの次のページ/テンプレートで、これらの各ファイルを取得します
• 各ファイルのメタデータを更新する
• これらのファイルをすべて一度にデータベースに再送信/保存します

したがって...上記のすべてが単純なファイルのアップロードの複雑さをどのように複雑にし、次のような関連する質問を含めることで、機能を提供する複雑さを増すかを見ることができます。

forms.py : 各ファイルをフォームにバインドする最善の方法

models.py : 各ファイルを既存のドキュメント モデルに関連付ける方法

views.pyの最初のページで、Postgres の既存のドキュメント モデルに従って各ファイルを保存する方法。2 ページ目の各ドキュメントを更新して保存する

...そして、繰り返しになりますが、フォーム ウィザードやクラス ベースのビューを使用せずに、これらすべてを実行したいと考えています。(特に、このユース ケースの CBV は、私には少しわかりません。) 言い換えれば、可能な限り最も防弾で読みやすく/理解しやすいソリューションにつながるアドバイスを探しています。データベースに複数のヒットが発生する場合は、それで問題ありません。(ファイルをデータベースに保存することがベスト プラクティスに反すると思われる場合は、別の投稿を参照してください:データベースにファイル コンテンツを保存する

2 つのフォーム用に個別のビューを作成し、標準のアップロード フォームをサブクラス化することはできますか?

forms.py で...

...そして、上記の以前のアップロードハンドラーを次のようにリファクタリングします...

views.py で、現在のアップロード ハンドラを次のように置き換えます...

...？

このエラーが発生しています

ファイルの content_type (例: image/jpg) を表示しようとするとき。私はCarrierwave + Jquery File (どちらも私が望むように連携するように大幅に変更されています) + Amazon s3 (私が何をしているかを見るにはこれをクリックしてください) を使用しています。以前は、carrierwave と amazon s3 だけで動作していましたが、jquery ファイルのアップロードと直接 s3 を追加すると、動作しなくなりました。

誰かがここで私を助けてくれますか? これが私がやっていることです：

事前に感謝します。さらにコード/情報が必要な場合はお知らせください

詳細: を使用してstorage :fogいます。私のキャリアウェーブアップローダーには、

jquery-fileupload-railsアプリケーションで画像をアップロードするためにGemを使用しています。コードは次のとおりです。

そして.jsファイルで：

すべて正常に動作しますが、画像のアップロード後、進行状況バーが削除されません。アップロード後にバーを削除するにはどうすればよいですか?

コメント付きのコードで提案されているように、window.location の URL を変更しない限り、プラグインが機能しています。

blueimp.github.com または blueimp.github.io のいずれかまたは両方を目的のドメインに変更すると、進行状況バーが実行され、成功が示されますが、何もアップロードされません。

blueimpを使用して実行しているサイトとサーバーの有効なURLに変更していますが、失敗します。

これから始めます：

そしてこれに変更：

ここで何が間違っていますか？

助けてくれてありがとう。

次のデモがあるとします。

jQuery File Upload Basic Plus のデモ

デモに従ってプロジェクトでこれを機能させていますが、各画像の「アップロード」ボタンを削除し、上部に「すべてアップロード」ボタンを追加したいと思います。私の人生では、それを行う方法がわかりません。ドキュメントはかなり薄いです...

たとえば、fileupload オブジェクトへのハンドルを作成して、var fileUpload = $('#fileupload').fileupload({fileUpload.send(); のようなものを呼び出そうとしました。しかし、「オブジェクトにメソッド「send」が含まれていません」というメッセージが表示されます

blueimp jquery-fileupload プラグインを angularjs で動作させるためにいくつかのテストを書いています。

ここに私が書いたものがありますが、できるだけシンプルにしようとしています:

【コントローラ.js】

[html]

実行中のインスタンスもここで確認できます。

問題は、fileupload プラグインによって返されるすべてのデータ オブジェクトが、すべてがうまくいったことを示しているように見えますが、実際にはサーバーにファイルがアップロードされていないことです (ファイルはここにアップロードする必要があります)。

サーバーの構成の問題が原因である可能性がありますが、どの方向に検索すればよいかまったくわかりません。サーバー側でblueimpネイティブのuploadHandler.phpを使用しています

動画ファイルをサーバーに送信するフォームを作成しました。

私のクライアントは、より優れた UI のプログレス バーを求めています。

バックエンドを変更せずに現在のフォームを使用できる JS スクリプトをドロップすることはできますか?それとも、それを機能させるために追加のルート/メソッドを追加する必要がありますか?

これは私が試みたものです。

https://github.com/blueimp/jQuery-File-Uploadプラグインをドロップします。これは素晴らしいように見えますが、フォームの送信ボタンをプラグインにバインドできないため、フォームは「通常どおり」送信されるだけで、プラグインは実行されません (プラグインは正常に初期化されています)。

プラグインはファイルを単独で送信したいと考えていますが、フォーム全体を送信する必要があります。

前もって感謝します。