13

asp.netを使用してファイルをアップロードするためにblueint jquery.fileuploadプラグインを使用しています

ユーザーがカテゴリ（ドロップダウンリストボックス）、タイトル（アップロードされたファイルのテキストボックス）、およびファイル入力（プラグインによって処理される）を選択できるページがある状況があります。

プラグイン: https://github.com/ieb/jQueryFileUpload.Net

JavaScript/jquery:

 $('#fileup').fileupload({
                    replaceFileInput: false,
                    formData: function (form) {
                        return [{ name: 'dcat', value: $('#ddlCats').val() }, { name: 'title', value: $('#txtTitle').val()}];
                    },
                    dataType: 'json',
                    url: '/_handlers/FileHandler.ashx',
                    add: function (e, data) {
                        var valid = true;
                        var re = /^.+\.((doc)|(xls)|(xlsx)|(docx)|(pdf)|(pts))$/i;
                        $.each(data.files, function (index, file) {
                            if (!re.test(file.name)) {
                                $('#uploaded').html('This file type is not supported');
                                valid = false;
                            }
                        });
                        if (valid)
                            data.submit();
                    },
                    done: function (e, data) {
                        $.each(data.result, function (index, file) {
                            $('#uploaded').html(file);
                        });
                        GetFiles($('#ddlCats').val())
                    },
                    error: function () {
                        alert('An error occured while uploading the document.');
                    }
                });

html:

<div id="fUpload">
<span style="font-weight:bold;">Yeni Belge:</span><br />
    <table class="ktoeos">
        <tr>
            <td>Category:</td>
            <td> <select id="ddlCats"></select></td>
        </tr>
        <tr>
            <td>Document Description:</td>
            <td><input type="text" id="txtTitle" /></td>
        </tr>
        <tr>
            <td>Select Document:</td>
            <td><input type="file" name="file" id="fileup" /></td>
        </tr>
        <tr>
           <td colspan="2"><input type="submit" id="btnSubmit" value="Upload" /></td>
        </tr>
    </table>
    <div id="uploaded"></div>

私の問題は、ファイルを選択した直後にファイルが (http ハンドラーを介して) アップロードされることです。それを処理して他のフォームデータを送信することはできますが、検証を実行する必要があるため、送信ボタンでこのイベントを発生させたいと考えています。また、ユーザーは最初にファイルを選択してからフォームの他の部分に入力することもできますが、この場合、ユーザーがそれを行う前にフォームが送信されるため、ユーザーはそれを行うことができません。

私はあまり優れた JavaScript プログラマーではないので、この機能がプラグインで利用可能な .js ファイルで既に利用可能であるかどうかはわかりません (おそらく利用可能です)。何を変更または実行する必要があるかについてのアイデアはありますか?

4

2 に答える 2

19

ファイルがウィジェットに追加されるとすぐにaddコールバックが呼び出されるため、それをオーバーライドしてアップロードを一時停止し、ボタンのクリックで開始する必要があります。

add: function (e, data) {
    $("#btnSubmit").click(function () {
        // validate file...
        if(valid)
            data.submit();
    });
}

更新：ドキュメントには、これのより良い例があります：

于 2012-06-27T00:08:01.473 に答える
6

" autoUpload: true"でデフォルトとして設定されているオプションがあるため、これは非常に簡単です。jquery.fileupload-ui.js

に変更するfalseと、ボタンの Click イベントを手動でコーディングできます。

于 2012-03-06T10:28:08.543 に答える