4

入力フィールドでファイルを選択するとすぐに、jqueryファイルアップロードプラグインがファイルをアップロードするのに苦労しています。

ファイルをアップロードするカスタム送信ボタンが欲しいのですが。

これどうやってするの？

マークアップ：

<span>Add File</span>
<input id="fileupload" type="file" multiple="" data-url="upload.ashx" name="files[]" />

<label for="file_name">Name:</label>
<input type="text" name="file_name" id="file_name" />

<input type="button" id="uploadFileBtn" value="Upload" />

Javascript： 

$('#fileupload').fileupload(
{
dataType: 'json',
done: function (e, data) {
    alert("success");                               
}
});
4

3 に答える 3

0

解決

fileuploadには、ファイルが選択されるとすぐにトリガーされるADDイベントがあります。クリックイベントをADDイベント内に記述し、それによってデフォルトの動作をオーバーライドしました。

テスト済みで、期待どおりに機能します。

解決策2-Jqueryフォームプラグイン

いくつかの調査の後、私はajaxfileuploadを処理するためのより良い方法を見つけました。http://www.malsup.com/jquery/form/にあるJqueryフォームプラグインを使用しています

通常のフォームと同じように機能し、ファイル入力を処理できます。

于 2012-09-01T09:37:42.147 に答える
0

入力は同じフォーム内にありますか？

コードを変更する：

<form id="fileupload" action="someAction" method="POST" enctype="multipart/form-data">
    <span>Add files</span>
    <input type="file" name="files[]" multiple>
    <button type="submit" class="btn btn-primary start">
        <span>Start upload</span>
    </button>
</form>
于 2012-08-30T17:36:07.057 に答える
0

addイベントにフックすることでそれを行うことができます。そこで、アップローダーがデフォルトの動作を実行できないようにします。jquery-file-upload -docsはそれを説明していますが、見つけるのは少し難しいです。

以下は、blueimpの基本的なアップローダーチュートリアルで書かれています。

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        add: function (e, data) {
            data.context = $('<button/>').text('Upload')
                .appendTo(document.body)
                .click(function () {
                    data.context = $('<p/>').text('Uploading...').replaceAll($(this));
                    data.submit();
                });
        },
        done: function (e, data) {
            data.context.text('Upload finished.');
        }
    });
});

実際には、作成している送信ボタンがフォーム内にないことが非常に重要です。

于 2014-12-03T17:47:42.650 に答える