這篇文章主要介紹了jQuery Ajax使用FormData上傳檔案和其他資料後端web.py取得 ,需要的朋友可以參考下,希望能幫助大家。 XMLHttpRequest Level 2 新增了一個新的介面-FormData。與普通的 Ajax 相比,使用 FormData 的最大優點就是我們可以非同步上傳二進位。 jQuery 2.0+的版本支援FormData 方法一:使用表單初始化FormData物件方式上傳檔案 •前端(JQuery): function loadFile(file){ var formdata = new FormData($$('form')[0]); $.ajax({ url: 'jobs/add', type: 'POST', datatype: 'json', data: formdata, cache:false, traditional: true, contentType: false, processData: false, success: function (data) {}, error: function () {} }); } •後台(web.py): class Add: def POST(self): i = web.input(myfile={}) print(i['myfile'].filename) #文件名 print(i['myfile'].value) #文件内容 print(i['myfile'].file.read()) #文件内容 注意: #1.的enctype屬性需要設定為「multipart/form-data」 2.$.ajax中processData、contentType和cache需要設定為false 3.後端透過web.input取得檔案的欄位名,同前端指定的input標籤的name屬性 方法二√:不用,使用FormData物件新增欄位方式上傳檔案 有時,我們不想用 標籤,而且透過ajax傳給後端的不只文件,可能還有其他的鍵值對,這時就可以用這個方法 •前端(JQuery): function loadFile(file){ container.fd = new FormData(); container.fd.append('myfile',file); container.fd.append('otherkey',othervalue); $.ajax({ url: 'jobs/add', type: 'POST', datatype: 'json', data: fd, cache:false, traditional: true, contentType: false, processData: false, success: function (data) {}, error: function () {} }); } •後台(web.py): class Add: def POST(self): i = web.input(myfile={}, otherkey='') print(i['myfile'].filename) #文件名 print(i['myfile'].value) #文件内容 print(i['myfile'].file.read()) #文件内容 注意: 1.沒有標籤(有了也不錯) 2.append()方法的第二個參數是檔案對象,在html中已經透過loadFile方法的參數傳過來 3.後端透過web.input取得檔案的欄位名,同前端append()方法的第一個參數 4.因為透過web.input取得的值都是字串,如果除檔案以外的鍵值對傳過來是null,會自動轉換為字串'null'。這點處理的時候需要注意 相關推薦: HTML裡FormData物件的詳細介紹 使用FormData提交表單及上傳圖片的方法 JavaScript中FormData 在物件中運用#