1

この投稿は有望に見えますがblobFile、コードの内容がわかりませんか? この変数はどこで取得できますか?

jQuery.ajax と FormData を使用してファイルをアップロードする方法


追加の質問:

FormDataオブジェクトには、ファイル入力を含むすべての入力フィールドにデータが含まれていると想定しています。しかし、そうではないようです。それ以外の場合、ファイル データを に追加する必要はありません。ファイル入力がに含まれていない理由を誰か説明できますか?FormDataFormData

また、私は Django バックエンドを使用しています。これは、慣例により、アップロードされたファイルにアクセスしますrequest.FILES。request.FILESではなくファイルデータrequest.POSTを入れるにはどうすればよい$.ajax()ですか?

編集 私は、私のものrequest.POSTとformData空の中に何もないことを理解しました。理由がわかりません..関連するコードは次のとおりです。

//html

<form action="" method="POST" enctype="multipart/form-data">{% csrf_token %}
    <span class='file-name' id='file-name-1'>FILE 1</span>
    <input type="file" id='id_image'>
    <input class="browse-click" type="button" value="+"/>
    <input id="send" type="submit" value="change">
</form>

//js

<script>
    // when button is clicked, the file browser opens
    $('.browse-click').on("click" , function () {
        $('#id_image').click();
    });

    // upload file async when file is selected in file browser
    $('#id_image').on('change', function () {
        var currentpath = window.location.pathname;
        var formData = new FormData($('form')[0]);
        formData.append('csrfmiddlewaretoken', '{{ csrf_token }}');
        $.ajax({
            url: currentpath,  //server script to process data
            type: 'POST',
            xhr: function() {  // custom xhr
                var myXhr = $.ajaxSettings.xhr();
                if(myXhr.upload){ // check if upload property exists
                    myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // for handling the progress of the upload
                }
                return myXhr;
            },
            data: formData, 
            cache: false,
            contentType: false,
            processData: false
        });
    });

    function progressHandlingFunction(e){
        if(e.lengthComputable){
            $('progress').attr({value:e.loaded,max:e.total});
        }
    }
</script>
4

1 に答える 1

1

FormDataデータ オブジェクトは、フォーム要素を使用して、または使用せずにインスタンス化できます。
フォーム要素でインスタンス化すると、フォーム内のすべてのフィールドが自動的にフォーム データ オブジェクトに追加されます。
そうでない場合 (リンク先の質問の場合)、append メソッドを使用してすべてのフィールドをフォーム データに手動で追加する必要があります。ファイル入力から取得できる File を使用することもでき
blobFileます。

于 2013-05-26T18:52:22.670 に答える