Q: .fileupload() が戻らないのはなぜですか? （一言で言えば質問）
詳細：
私は blueimp の JQuery の fileupload を使用してファイルをドラッグ アンド ドロップし、CarrierWave で処理します。ほとんどの場合、正しく初期化されます。
選択したタブに応じて、さまざまなターゲットへのさまざまなファイルアップロードを受け入れるネストされたタブインターフェイス (ブートストラップ) があります。これも機能します。ほとんどの場合、すべてが正しく初期化され、満足しています。
しかし、かなり頻繁に .fileupload() 関数が返されず (クラッシュし)、クライアントまたはサーバーにエラー メッセージが表示されません。私はその理由を理解しようとしています。
(注: ここでの「履歴」という言葉は、ブラウザの履歴ではなく、私のデータを指します。)
表示されるデータは、ajax 呼び出しによって読み込まれます。form_forとは<script>パーシャルに含まれています: records/_fileupload.html.erb (以下に表示) パーシャルはその ajax 呼び出しによってロードされません。
<div class="container span9">
<%= form_for Record.new, :remote => true, :html => { :multipart => true, :id => "fileupload-history" } do |f| %>
....
<div class="row fileupload-buttonbar" id="fileupload-droptarget-history">
....
<div class="progress progress-success progress-striped active fade">
<div class="bar" style="width:0%;"></div>
</div>
....
<!-- The loading indicator is shown during image processing -->
<div class="fileupload-loading"></div>
<!-- The table listing the files available for upload/download -->
<table class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
....
<!-- standard "template-upload" template from example code -->
<script id="template-upload-fileupload-history" type="text/x-tmpl">
....
<!-- Empty template to display files available for download (unused) -->
<script id="template-download-history" type="text/x-tmpl"></script>
同じファイルで続けて$(function ()...、ページの読み込みが完了した後にスクリプトを実行するために使用されていることに注意してください。
<script type="text/javascript" charset="utf-8">
$(function () {
このアラートは発生します...
alert("fileupload history fileupload.html.erb - A");
// Initialize the jQuery File Upload widget:
$('#fileupload-history').fileupload({
uploadTemplateId: "template-upload-fileupload-history",
downloadTemplateId: "template-download-history",
dropZone: $("#fileupload-droptarget-history")
});
ただし、次のアラートが発生しない場合があり、.fileupload() が返されない (クラッシュした) ことを示します。
alert("fileupload history fileupload.html.erb - B");
私の例を完成させるために、たまたまこのコードを見ている人に役立つ情報をいくつか示します。この最初の 1 つは、アップロードの完了後に表示されたデータを更新することです。
$('#fileupload-history').bind('fileuploaddone', function (e, data) {
fillHistoryAjaxHolder($("#currentAJAXHistoryUrl").html());
});
...そして、これはドラッグ アンド ドロップを指定されたドロップ ターゲットのみに制限します。
// Disable drag-n-drop for the rest of the page
$(document).bind('drop dragover', function (e) {
e.preventDefault();
});
});
</script>
だから私の質問：
.fileupload が時々返さない原因は何ですか? （自分のページへのアクセス方法によって...または以前にロードされたものによって異なります）
それで、この時点より前に起こるはずのある種の初期化があるのだろうか？
さて、物事を複雑にするために：
以前は、テンプレートの複数のインスタンスがあり、id="fileupload"多数のファイルにコピーされた のインスタンスさえありました。しかし、別のターゲットの問題に遭遇していることに気付いたので、この場合、別の場合などに変更id="fileupload"しid="fileupload-history"ましid="fileupload-report"た。アイデアは、ファイル アップロードのすべてのインスタンスを独自の個別の部分に分割することでした。
しかし、古い (複製された) コードを取り除くと、.fileupload()障害がより頻繁に発生するようになりました。（今ではかなり確実に失敗します）
それで（最後に！）経験豊富なJQueryファイルアップロードユーザーへの私の質問：
- 複数のアップロード ターゲットの場合、異なる
form_forid='tag'タグを使用する必要がありますか?
次の例では、.fileupload() へのさまざまな呼び出しに同じ要素を使用しているため、質問します。
github の例: "Multiple-File-Upload-Widgets-on-the-same-page" :
$('.fileupload').each(function () {
$(this).fileupload({
dropZone: $(this)
});
});
$('.fileupload')では、異なる要素を使用することに問題はありますか?- チェックしていない可能性のあるエラーメッセージを探すべき場所はありますか?
- 現在、Google Chrome の Developer Tools の通常の場所には何も表示されません。
- 何かご意見は？
長文、すいません。