成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Dean / 622人閱讀

摘要：還特別介紹一種用使用對象上傳文件的方法。設置為上傳文件不需要緩存。用上傳文件因為不是所有瀏覽器都支持的，所以有時候需要用來實現(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可以操作，不能通過序列化手段得到其里面的內容。它的用法也只有一個，用于增強型的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對象，不需要對數(shù)據(jù)進行處理。

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

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

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

上傳后，服務器代碼需要從查詢參數(shù)名為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來實現(xiàn)文件上傳的功能。

HTML代碼

js代碼

var iframe = $("