web-dev-qa-db-ja.com

jqueryを使用してマルチパートフォームデータを送信する方法

<form id="uploadForm" enctype="multipart/form-data" action="http://localhost:1337/ad/upload" method="post" name="uploadForm" novalidate>
    <input type="file" name="userPhoto" id="userPhoto" />
    <input type="submit" value="submit" id="uploadImage" />
</form>

これは私のHTMLフォームで、ファイルを出力ファイルとして受け入れます。ユーザーは画像ファイルを選択して、[送信]をクリックできます。これは機能しますが、現在のページのURLはlocalhost：1337/ad/uploadに変更されます。ページを同じURLのままにしておきたい。

$("form#uploadForm").submit(function(event) {
    event.preventDefault();
    var formData = new FormData($(this)[0]);
    var posting = $.post(url, formData);

})

私はこれをjqueryを使用してフォームを送信しようとしましたが、エラーが発生しました：Uncaught Type error：Illegal Invocation

タイプがmultipart/formdataの場合にフォームが送信するデータとjQueryでこのデータを取得する方法

jqueryhtmlajaxformsmultipartform-data
8
user3655266

processData

デフォルトでは、オブジェクト（技術的には文字列以外）としてデータオプションに渡されたデータは処理され、デフォルトのコンテンツタイプ「application/x-www-form-urlencoded」に適合するクエリ文字列に変換されます。 。 DOMDocumentまたはその他の未処理データを送信する場合は、このオプションをfalseに設定します。

jQuery Ajax Documentation を確認してください

このようにajaxを試してください-

var form = new FormData($("#uploadForm")[0]);
$.ajax({
        url: your_url,
        method: "POST",
        dataType: 'json',
        data: form,
        processData: false,
        contentType: false,
        success: function(result){},
        error: function(er){}
});
21
Developer

FormDataに処理用のすべてのフォームを与えることができます

var form = $('#uploadForm')[0]; 
// You need to use standart javascript object here
var formData = new FormData(form);

またはformdataの正確なデータを指定します

var formData = new FormData();
formData.append('userPhoto', $('input[type=file]')[0].files[0]);
0
Rahul Patel