JavaScript中FormData 在物件中運用

FormData 物件的使用

在本文章中

1. 如何建立一個FormData物件

2. 透過HTML表單創建FormData物件

3. 使用FormData物件上傳檔案

4. #透過AJAX提交表單和上傳檔案可以不使用FormData物件

5. #相關連結

透過FormData物件可以組裝一組用 XMLHttpRequest傳送請求的鍵/值對。它可以更靈活方便的發送表單數據，因為可以獨立於表單使用。如果你把表單的編碼類型設定為multipart/form-data ，則透過FormData傳輸的資料格式和表單透過submit() 方法傳輸的資料格式相同

#如何建立一個FormData物件Edit

你可以自己建立一個FormData對象，然後透過呼叫它的append()方法來新增字段，就像這樣：

var formData = new FormData();

formData.append("username", "Groucho");
formData.append("accountnum", 123456); // 数字 123456 会被立即转换成字符串 "123456"// HTML 文件类型input，由用户选择formData.append("userfile", fileInputElement.files[0]);// JavaScript file-like 对象var content = '975f881abd041d8a9a52113a3d7608728ad3eee38b36f0786840bfc85b25539ahey!0d36329ec37a2cc24d42c7229b69747a5db79b134e9f6b82c0b36e0489ee08ed'; // 新文件的正文...var blob = new Blob([content], { type: "text/xml"});

formData.append("webmasterfile", blob);var request = new XMLHttpRequest();
request.open("POST", "http://foo.com/submitform.php");
request.send(formData);

注意：欄位"userfile" 和"webmasterfile"  都包含一個檔案.欄位"accountnum" 是數字類型，它將被FormData.append()方法轉換成字串型別(FormData 物件的欄位類型可以是 Blob, File, 或string: 如果它的欄位類型不是Blob也不是File，則會被轉換成字串型別。 "accountnum", "userfile" 和 "webmasterfile"四個字段，然後使用XMLHttpRequest

的

send()方法傳送表單資料。 #類型。功能並將其擴展為支援使用者係統上的檔案。 Edit想要建構一個包含Form表單資料的FormData對象，需要在建立FormData物件時指定表單的元素。 ##你還可以在建立一個包含Form表單資料的FormData物件之後和發送請求之前，附加額外的資料到FormData物件裡，像這樣：

var formData = new FormData(someFormElement);
示例：var formElement = document.querySelector("form");var request = new XMLHttpRequest();
request.open("POST", "submitform.php");
request.send(new FormData(formElement));

這樣你就可以在發送請求之前自由地附加不一定是用戶編輯的字段到表單數據裡使用FormData對像上傳文件Edit

#你也可以使用FormData上傳檔案。使用的時候需要在表單中新增一個檔案類型的input：

var formElement = document.querySelector("form");var formData = new FormData(formElement);var request = new XMLHttpRequest();
request.open("POST", "submitform.php");
formData.append("serialnumber", serialNumber++);
request.send(formData);

然後使用下面的程式碼發送請求：

ff146639ecf87721cba4be18b8688d52
  2e1cf0710519d5598b1f0f14c36ba674Your email address:8c1ecd4bb896b2264e0711597d40766c
  fdd4de8b295fab4aa0708ba29a56a4f8ff9d32c555bb1d9133a29eb4371c1213
  2e1cf0710519d5598b1f0f14c36ba674Custom file label:8c1ecd4bb896b2264e0711597d40766c
  3c2750d34148cf8c03cc62edc6c563efff9d32c555bb1d9133a29eb4371c1213
  2e1cf0710519d5598b1f0f14c36ba674File to stash:8c1ecd4bb896b2264e0711597d40766c
  965e00529aa4b86d8dd68bfcdaa48288
  5fa1d26c6939704a2c990d4281d4b44df5a47148e367a6035fd7a2faa965022ee388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3

注意：

如果FormData物件是透過表單建立的，則表單中指定的請求方式會被應用到方法open()中 。

你也可以直接向FormData物件附加File或Blob類型的文件，如下所示：

var form = document.forms.namedItem("fileinfo");
form.addEventListener('submit', function(ev) {  var oOutput = document.querySelector("p"),
      oData = new FormData(form);

  oData.append("CustomField", "This is some extra data");  var oReq = new XMLHttpRequest();
  oReq.open("POST", "stash.php", true);
  oReq.onload = function(oEvent) {    if (oReq.status == 200) {
      oOutput.innerHTML = "Uploaded!";
    } else {
      oOutput.innerHTML = "Error " + oReq.status + " occurred when trying to upload your file.666a5bd9fab33f2f6688eb1baf827b5d";
    }
  };

  oReq.send(oData);
  ev.preventDefault();
}, false);

使用appned()方法時，可以透過第三個可選參數設定發送請求的頭 Content-Disposition 

指定檔案名稱。如果不指定檔案名稱（或不支援該參數時），將使用名字「blob」。

如果你設定正確的配置項，你也可以透過jQuery來使用FormData物件：

data.append("myfile", myBlob, "filename.txt");

#

以上是JavaScript中FormData 在物件中運用的詳細內容。更多資訊請關注PHP中文網其他相關文章！