7

この質問のバリエーションは何度も出てきたことを認識していますが、この種のコンテキストでこの質問に答えるものを見つけることができません.

jQueryを利用し、ファイルのアップロードが完了すると成功のコールバックを返すサードパーティのファイルアップローダーを使用しています。

私が達成したいのは、「送信」をクリックするとアップロード機能を起動し（そしてファイルはプログレスバーでアップロードを開始します）、成功のコールバックを待つファイルアップローダーとともに、テキストフィールドを持つフォームですフォームの送信に進みます。

私は jQuery の完全なばかであり、完全に混乱していることをすぐに認めなければならないので、これを達成する方法が非常にわかりません。

これまでの私の試みでは、ファイルのアップロードの進行中にフォームをすぐに送信しようとするだけです。

[今すぐアップロード] ボタンをクリックすると、関数manualuploader.uploadStoredFiles();がインスタンス化されます。

ファイル アップローダをインスタンス化する jQuery は次のとおりです。

<form action="index.php" method="post" enctype="multipart/form-data" id="uploader">
<div id="manual-fine-uploader"></div>
<div id="triggerUpload" class="btn btn-primary" style="margin-top: 10px;">
<input type="text" name="textbox" value="Test data">
<input name="test" type="button" value="Upload now">
</div>
</form>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="fineuploader-3.6.3.js"></script>
<script>
$(document).ready(function() {
var manualuploader = new qq.FineUploader({
        element: $('#manual-fine-uploader')[0],
        request: {
                endpoint: 'uploader.php'
        },
        autoUpload: false,
        text: {
                uploadButton: '<i class="icon-plus icon-white"></i> Select Files'
        }
        });
        $('#triggerUpload').click(function() {      
        manualuploader.uploadStoredFiles();
        });
});

</script>
4

1 に答える 1

6

jQuery を使用していることに気付きました。Fine Uploader の jQuery ラッパーを使用してみませんか?

onCompleteアップロードが完了すると（成功したかどうかに関係なく）発生するコールバックをリッスンします。がonComplete起動されるsubmitForm()と、すべてのファイルが正常に送信されたことを確認するためのロジックを含むようにします。

qq.statusロジックは比較的単純です。進行中のファイルがなく、 ofを持つファイルがない場合はFAILED、フォームの送信に進むことができます。

また、onCancelコールバックをリッスンして、アップロードが失敗してキャンセルされた場合にフォームが送信されるようにします。

さらに多くのコールバックがあります。コールバックとAPI メソッドに関する Fine Uploader のドキュメントを読むことをお勧めします。さらに、Fine Uploader jQuery docsも参照してください。

jQuery を理解することが問題である場合は、これを近くに置いておくことをお勧めします。

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="fineuploader-3.6.3.js"></script>

<form action="index.php" method="post" id="uploader">
<input type="text" name="textbox" value="Test data">
    <div id="manual-fine-uploader"></div>
    <div id="triggerUpload" class="btn btn-primary" style="margin-top: 10px;">
    </div>
</form>



$(document).ready(function() {

    $("#triggerUpload").click(function () {
        $("#manual-fine-uploader").fineUploader('uploadStoredFiles'); 
    });

    function submitForm () { 
        if ($(this).fineUploader('getInProgress') == 0) {
            var failedUploads = $(this).fineUploader('getUploads', 
                { status: qq.status.UPLOAD_FAILED });
            if (failedUploads.length == 0) {    
                // do any other form processing here
                $("#uploader").submit();
            }
        }
    };

    // Instantiate a Fine Uploader instance:
    $("#manual-fine-uploader").fineUploader({
        autoUpload: false,
        request: {
            endpoint: "/uploads_bucket"
        }
    }).on("complete", function (event, id, name, response) {
        submitForm.call(this);
    }).on('statusChange', function (event, id, oldStatus, newStatus) {
        if (newStatus === qq.status.CANCELED) {
            submitForm.call(this);
        } 
    });
});

他にご不明な点がございましたら、お気軽にお問い合わせください。

于 2013-06-07T17:24:19.587 に答える