国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

FormData 和 Iframe上傳文件的兩種方式

Dean / 597人閱讀

摘要：還特別介紹一種用使用對象上傳文件的方法。設置為上傳文件不需要緩存。用上傳文件因為不是所有瀏覽器都支持的，所以有時候需要用來實現文件上傳的功能。

用AJAX上傳文件，一般都是用FormData對象。

FormData對象，是可以使用一系列的健值對來模擬一個完整的表單，然后使用XMLHttpRequest發送這個“表單”。

FormData的使用

創建一個空的FormData對象，然后再用append方法逐個增加鍵值對

var formdata = new FormData();
formdata.append("name","xx");
formdata.append("flie", filename);

取得form元素對象，將它作為參數傳入FormData對象中。

var formOjb = document.getElementById("form");
var formdata = new FormData(formOjb );

利用form元素對象的getFormData方法生成它

var formobj = document.getElementById("form");
var formdata = formobj.fetFormData();

formdata是一個不透明的對象，現在暫時只有一個append可以操作，不能通過序列化手段得到其里面的內容。它的用法也只有一個，用于增強型的XMLHttpRequest對象的send方法中去。

var formEl = document.getElementById("form");
formData = formEl.getFormData();
formData.append("serialnumber", serialNumber++);
xhr.send(formData);

還特別介紹一種用jQuery使用formData對象上傳文件的方法。

使用
表單初始化FormData對象方式上傳文件

HTML代碼

javascript代碼

$.ajax({
    url: "/upload",
    type: "POST",
    cache: false,
    data: new FormData($("#uploadForm")[0]),
    processData: false,
    contentType: false
}).done(function(res) {
}).fail(function(res) {});

注意點：

processData設置為false。因為data值是formData對象，不需要對數據進行處理。

標簽添加enctype="multipart/form-data"屬性。

cache設置為false, 上傳文件不需要緩存。

contentType設置為false。因為是由表單構造的FormData對象，且已經聲明了屬性enctype="multipart/form-data"，所以這里設置為false.

上傳后，服務器代碼需要從查詢參數名為file獲取文件輸入流對象，因為中聲明的是name="file".

使用FormData對象添加字段方式上傳文件

HTML代碼

javascript代碼

var formData = new FormData();
formData.append("file", $("#file")[0].files[0]);
$.ajax({
    url: "/upload",
    type: "POST",
    cache: false,
    data: formData,
    processData: false,
    contentType: false
}).done(function(res) {
}).fail(function(res) {});

從$("#file")[0].files[0] 中可以看出一個 標簽可以上傳多個文件，只要在這個標簽中添加multiple或multiple="multiple"屬性。

用Ifrmae上傳文件

因為FormData不是所有瀏覽器都支持的，所以有時候需要用iframe來實現文件上傳的功能。

HTML代碼

js代碼

var iframe = $("