0

jQuery プラグインを Ajax 関数と統合して Django フォームを投稿する方法がわかりません。アップロードするファイルという 1 つのフィールドだけを扱う例を見てきました。しかし、フォームに他のフィールド (テキストボックス、選択など) が含まれている場合はどうなるでしょうか?

これが私のhtmlフォームです（ドロップダウンリストとアップロードするファイルがあります）：

<form id="import_form" class="form-horizontal" method="post" enctype="multipart/form-data">{% csrf_token %}
    {{ form.non_field_errors }}
    <div id="fileToImportChoice" class="fieldWrapper">
        {{ form.fileToImport.errors }}
        {{ form.fileToImport }}
    </div>
    <div id="file_to_import" class="fieldWrapper">
        {{ form.csvFile.errors }}
        {{ form.csvFile }}
    </div>
    <input type="button" id="import_button" value="IMPORT" onclick="javascript:display_message('{% url import %}', document.getElementById('import_form'))" />
</form>

これが私のjquery関数です：

function display_message(link, form)
{
    var datastring = $(form).serialize();
    $.ajax(
    {
        url: link,
        type: 'POST',
        dataType: 'json',
        enctype: "multipart/form-data",
        data: datastring,
        success: function(result)
        {
            //form not valid -> displays errors
            if (result.form_errors)
            {
                //append current errors to the html form
                errors=result.form_errors
                for (var key in errors)
                {
                    $("#"+key+"_errors").html('<ul class="errorlist"><li>'+errors[key]+'</li></ul>');
                    //~ alert(key+': '+errors[key]);
                }
            }
            else
            {
            }
        }
    });
}

最初の質問: ファイルの名前をdatastring変数に挿入する必要がありますか? 今のところ、フォーム エラーを表示するたびに、csvFile以前にアップロードするファイルを選択した場合でも、Django は自分が空であると不平を言います。プラグインがなくても普通だと思います。右？

さて、私の主な質問: jQuery プラグインを関数に統合する方法は? と呼ばれる単純なものを見てきましたSimple-Ajax-Uploader。使用方法の例を次に示します。

var uploader = new ss.SimpleUpload({
    button: $('#uploadBtn'), // upload button
    url: '/uploadhandler', // URL of server-side upload handler
    name: 'userfile', // parameter name of the uploaded file
    onSubmit: function() {
        this.setProgressBar( $('#progressBar') ); // designate elem as our progress bar
    },
    onComplete: function(file, response) {
        // do whatever after upload is finished
    }
});

最後に...私のフォームの他のデータと一緒にファイルデータを送信する方法は? 私の考えは、関数でプラグインを呼び出してから、ビューに投稿するすべてのデータを含む変数をdisplay_message更新することです。datastringもしそうなら、どのように？

編集:シンプルなプラグイン を探しています。アップロードするファイルは 1 つだけで、カスタム CSS は必要ありません。そして、私はそれを移植したいです（したがってHTML5、FormData除外されます）。

4

2 に答える 2

1

すべてのファイルを含むフォーム全体をアップロードする 1 つの方法は、フォームを非表示の iframe に送信し、iframe のコンテンツを読み取ってサーバーの応答を確認することです。コード例:

<form method="post" action="..." enctype="multipart/form-data" target="iframe-name">
    ...
</form>


<iframe name="iframe-name"></iframe>

loadiframe でイベントを処理し、このようなものを使用して iframe のコンテンツを読み取る必要があります (サーバーは、ブラウザー間の互換性のためにタグiframe.contentDocument.body.innerHTML付きの HTML を返す必要があります)。<body>実際の iframe 要素は、JavaScript を使用して動的に作成および非表示にすることができます。

このようなプラグインを作成するのはかなり簡単ですが、一方で、おそらくインターネットで入手できるアップロード プラグインのいくつかは、この方法を使用してファイルをアップロードします。

于 2013-09-04T18:41:02.833 に答える
0

FormDataオブジェクトを使用して、ajax 経由でファイルをアップロードできます

function display_message(link, form)
{
    var formData = new FormData(form);
    $.ajax(
    {
        url: link,
        type: 'POST',
        dataType: 'json',
        processData: false,
        contentType: false,
        data: formData,
        success: function(result)
        {
            //form not valid -> displays errors
            if (result.form_errors)
            {
                //append current errors to the html form
                errors=result.form_errors
                for (var key in errors)
                {
                    $("#"+key+"_errors").html('<ul class="errorlist"><li>'+errors[key]+'</li></ul>');
                    //~ alert(key+': '+errors[key]);
                }
            }
            else
            {
            }
        }
    });
}
于 2013-09-04T17:11:49.290 に答える