0

コア モードと jQuery を使用した私の Fine Uploader の実装は、ファイルの 2 番目のバッチをアップロードしようとするまで問題なく動作します。

ファイルの最初のバッチが (正常に) アップロードされたら、ボタンをクリックしてファイルを追加し、ファイルを選択するためのダイアログを取得できます。ただし、ファイルの選択を確認しても何も起こりません。

ハンドラー内の次のコードがcomplete問題を引き起こしています。

$('#attachments-upload').button('reset'); // Bootstrap stateful button

#attachments-uploadbutton:オプションとしても設定されているボタンのIDです。完全な JS コード リストは次のとおりです。

$('#attachments-list').fineUploader({
    uploaderType: 'basic',
    button: $('#attachments-upload'),
    debug: true,
    request: {
        endpoint:   $route_atatachments_upload,
        inputName: 'attachments'
    },
    validation: {
        allowedExtensions: ['png', 'jpeg', 'gif', 'pdf', 'doc', 'bmp'],
        sizeLimit: 10485760 // 10MB
    }
})
.on('upload', function(event, id, fileName) {

    $('#attachments-upload-error').hide();
    $('#attachments-upload').button('loading');
    $('#attachments-upload-progress').show().attr('aria-valuenow', 0);

})
.on('progress', function(event, id, fileName, loaded, total) {

    if (loaded < total) {
        var progress = Math.round(loaded / total * 100) + '% of ' + Math.round(total / 1024) + ' kB';
        $('#attachments-upload-progress').attr('aria-valuenow', progress);

    } else {
        $('#attachments-upload-progress').attr('aria-valuenow', 100);
    }

})
.on('complete', function(event, id, fileName, responseJSON) {

    $('#attachments-upload-progress').hide();
    $('#attachments-upload').button('reset');

    if (responseJSON.success) {

        $('<tr class="attachment" data-attachment-uuid="'+ responseJSON.uuid + '">' +
            '<td>' + fileName +'</td>' +
            '<td>' + humanFileSize(responseJSON.size) + '</td>' +
            '<td style="text-align: center"><a class="delete-attachment" href="#"><span class="glyphicon glyphicon-trash" </a></td>' +
            '</tr>').
            insertBefore($('#add-attachment'));


    } else {
        $('#attachments-upload-error').show();
        console.log(responseJSON.error);
    }
});

これが HTML です。

<table class="table table-bordered" id="attachments-list">
    <thead>
        <tr>
            <th>Name</th>
            <th>Size</th>
            <th></th>
        </tr>
    </thead>
    <tbody id="added-attachments">
        <tr id="add-attachment">
            <td colspan="2">
                <div id="attachments-upload-progress" class="progress progress-striped active" style="display:none">
                    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
            </td><td style="width:1%; white-space:nowrap;">
                <button id="attachments-upload" class="btn btn-success" data-loading-text="loading ..." style="position: relative; overflow: hidden; direction: ltr; ">Add Files ...</button>
            </td>
        </tr>
    </tbody>
</table>

しかし、私が言ったように、次の行にコメントすると、

$('#attachments-upload').button('reset');

すべて正常に動作します。

4

1 に答える 1

5

Bootstrapのうさぎの穴を掘り下げて、あなたの答えを出しました。

.button('reset')Bootstrap が提供する方法は少し不安定です。ボタンの状態が変更される (つまり、.button('loading')呼び出さ.button('reset')れる) と、Bootstrap JS は、状態が変更される前にボタンの HTML コンテンツをキャッシュし、要素のdata属性の下に文字列として保存します。

したがって、最初のボタンは次のようになります。

<button id="attachments-upload"...>
    Add files ...
    <input type='file' name='qqfile'>
</button>

$("#attachments-upload").button('loading')ボタンの内部 HTMLを呼び出すと、次のように変更されます。

<button id="attachments-upload" ...>loading ...</button>

file 入力要素がなくなっていることに注意してください。

ボタンをリセットすると、キャッシュされた HTML が再挿入されて元の状態に戻ります。

<button id="attachments-upload"...>
    Add files ...
    <input type='file' name='qqfile'>
</button>

ただし、この時点でファイル入力要素は DOM から削除されており、以前にアタッチされたすべてのイベント ハンドラーはその要素では無効になっています。Fine Uploader は、この入力要素のonChangeイベントに内部的にバインドして、その入力要素を介して送信されたファイルを追跡します。

いくつかのオプションがあります。

何よりも、 and への呼び出しを削除し.button('reset')ます.button('loading')

1) ボタンに 'loading...' テキストを設定することを忘れてください。onComplete現在表示されている動作から、現在のアップロード ファイルが完了する (に到達する)まで、ユーザーがファイルをアップロードできないようにする必要があることがわかります。[ファイルのアップロード] ボタンはステートレスのままにする必要があるため、この動作は少し奇妙です。

2) 入力要素を削除せずに現在の動作を維持したい場合は、ハンドラー内のボタンの読み込みテキストをプログラムで変更します。

3) スピナーなどの別の進行状況通知を表示します (show()内onSubmitおよびhide()内で使用できますonComplete) 。

また、許可された拡張子に「jpg」を追加する必要があることに気付きました。現在、それらは拒否されますが、「jpeg」ファイルは受け入れられます。

于 2013-08-28T18:44:13.223 に答える