jQuery Ajaxはマルチパートフォームを送信します
JavascriptFormData
と$.ajax()
を使用して、マルチパートフォームを送信する方法を示す簡単なjQueryAjaxの例
1. HTML
複数のファイルをアップロードするためのHTMLフォームと追加のフィールド。
jQuery Ajax submit Multipart form
Ajax Post Result
2. jQuery.ajax
2.1 Create a Javascript FormData
object from a form.
var form = $('#fileUploadForm')[0]; var data = new FormData(form);
2.1 processData: false
, it prevent jQuery form transforming the data into a query string
$.ajax({ type: "POST", enctype: 'multipart/form-data', processData: false, // Important! contentType: false, cache: false,
2.3 Full example.
$(document).ready(function () { $("#btnSubmit").click(function (event) { //stop submit the form, we will post it manually. event.preventDefault(); // Get form var form = $('#fileUploadForm')[0]; // Create an FormData object var data = new FormData(form); // If you want to add an extra field for the FormData data.append("CustomField", "This is some extra data, testing"); // disabled the submit button $("#btnSubmit").prop("disabled", true); $.ajax({ type: "POST", enctype: 'multipart/form-data', url: "/api/upload/multi", data: data, processData: false, contentType: false, cache: false, timeout: 600000, success: function (data) { $("#result").text(data); console.log("SUCCESS : ", data); $("#btnSubmit").prop("disabled", false); }, error: function (e) { $("#result").text(e.responseText); console.log("ERROR : ", e); $("#btnSubmit").prop("disabled", false); } }); }); });