成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

Dean / 668人閱讀

摘要：還特別介紹一種用使用對象上傳文件的方法。設(shè)置為上傳文件不需要緩存。用上傳文件因?yàn)椴皇撬袨g覽器都支持的，所以有時候需要用來實(shí)現(xiàn)文件上傳的功能。

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

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

FormData的使用

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

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

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

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

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

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

formdata是一個不透明的對象，現(xiàn)在暫時只有一個append可以操作，不能通過序列化手段得到其里面的內(nèi)容。它的用法也只有一個，用于增強(qiáng)型的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) {});

注意點(diǎn)：

processData設(shè)置為false。因?yàn)閐ata值是formData對象，不需要對數(shù)據(jù)進(jìn)行處理。

標(biāo)簽添加enctype="multipart/form-data"屬性。

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

contentType設(shè)置為false。因?yàn)槭怯?form>表單構(gòu)造的FormData對象，且已經(jīng)聲明了屬性enctype="multipart/form-data"，所以這里設(shè)置為false.

上傳后，服務(wù)器代碼需要從查詢參數(shù)名為file獲取文件輸入流對象，因?yàn)?input>中聲明的是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] 中可以看出一個 標(biāo)簽可以上傳多個文件，只要在這個標(biāo)簽中添加multiple或multiple="multiple"屬性。

用Ifrmae上傳文件

因?yàn)镕ormData不是所有瀏覽器都支持的，所以有時候需要用iframe來實(shí)現(xiàn)文件上傳的功能。

HTML代碼

js代碼

var iframe = $("