FormData :
a) 提供了一個新的內建物件，可用于管理表單資料
b) 首先要獲取一個表單元素form
c) 然后在實體化時 new FormData(form)，將表單元素form傳進去
d) 會回傳一個物件，此物件可以直接做為xhr.send(formData)的引數
e) 此時我們的資料就是以二進制形式傳遞了
f) 注意我們這里只能以post形式傳遞
案例:
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>14-使用formdata收集資料實作用戶注冊</title> 8 </head> 9 10 <body> 11 <form action="" class="myform"> 12 用戶名：<input type="text" name='username' class="uname"> <br> 13 密碼：<input type="text" name="password" class="upass"> <br> 14 手機號碼：<input type="text" name="phone" class="uphone"> <br> 15 <input type="button" value="注冊" class="btn"> 16 </form> 17 18 <script> 19 document.querySelector('.btn').onclick = function () { 20 // 1.創建異步物件 21 var xhr = new XMLHttpRequest() 22 // 使用formdata收集用戶資料 23 // 獲取表單 24 var myform = document.querySelector(".myform") 25 // 將表單做為引數傳遞，在創建formData物件的時候 26 var formdata = new FormData(myform) 27 // 2.發送請求 28 // 2.1 設定請求行 29 xhr.open('post', 'http://127.0.0.1:3002/addUser') 30 // 2.2 設定請求頭，這里特別要注意，使用formdata不能設定請求頭，否則會報錯，因為formdata內部會進行資料引數的處理 31 // xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded') 32 // 2.3 設定請求體 33 // 生成的formData物件就可以直接做為異步物件的引數傳遞 34 xhr.send(formdata); 35 36 // 接收回應并處理 37 xhr.onload = function () { 38 console.log(xhr.response) 39 } 40 } 41 </script> 42 </body> 43 </html>
FormData 檔案上傳資料獲取 :
a) 我們上傳檔案是以二進制形式傳遞的
b) 我們可以通過表單<input type="file">獲取到一個檔案物件
c) 然后file.files[0]可以獲取檔案資訊
d) 然后再利用var formData = https://www.cnblogs.com/xjs-hp/p/new FormData() 實體化
e) 然后再利用formData.append(‘upload’, file.files[0])將檔案轉成二進制
f) 最后將 formData 做為xhr.send(formData)的引數
上傳進度
a) 利用XMLHttpRequest我們可以實作檔案的上傳
b) 并且我們可以通過xhr.upload.onprogress = function (ev) {// code}，監聽上傳的進度
c) 這時我們上傳的進度資訊會保存在事件物件ev里
d) ev.loaded 表示已上傳的大小，ev.total表示檔案整體的大小
e) var percent = ev.loaded / ev.total
案例:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>15-使用formdata實作檔案上傳</title> 8 <style> 9 div { 10 height: 100px; 11 width: 100px; 12 background-color: #eee; 13 } 14 </style> 15 </head> 16 17 <body> 18 <form action=""> 19 <input type="file" name="img" id="img" class="myimg"> <br> 20 <img src="" alt="" class="myphoto"> 21 <div></div> 22 <input type="button" value="單擊上傳檔案" class="btn"> 23 </form> 24 25 <script> 26 // onchange:用戶一選擇檔案就進行觸發 27 document.querySelector('#img').onchange = function () { 28 var xhr = new XMLHttpRequest() 29 30 // 通過formdata收集圖片資料,只是想收集圖片資料，所以不用傳入表單 31 var formdata = new FormData() 32 // 獲取file表單元素中所選擇的檔案物件--不是檔案名稱，而是檔案資料 33 // files：當前file表單元素中所有選擇的圖片串列，它是一個偽陣列 34 // 這里使用[0]是因為我們就選擇一張圖片 35 var myfile = document.querySelector('#img').files[0] 36 // 一個很重要的方法：append,它可以讓我們在formdata中追加引數：append(key,value),value可以是任意格式 37 // blob:binary large object:就是指資源檔案，就是檔案物件 38 formdata.append('img', myfile) 39 40 // 發送請求 41 // var xhr = new XMLHttpRequest() 42 xhr.open('post', 'http://127.0.0.1:3002/uploadFile') 43 44 // 監聽檔案上傳進度 45 xhr.upload.onprogress = function (event) { 46 console.log(event) 47 var pecent = event.loaded / event.total * 100 + '%' 48 document.querySelector('div').style.width = pecent 49 } 50 51 // 注意不用自己來設定請求頭，況且如果自己設定了反而會出錯--請求不再發送 52 // xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 53 xhr.send(formdata) 54 55 xhr.onload = function () { 56 if (xhr.status == 200) { 57 var result = JSON.parse(xhr.responseText) 58 if (result.code == 200) { 59 // 實作圖片預覽 60 document.querySelector('.myphoto').src = 'http://127.0.0.1:3002/images/' + result.img 61 } 62 } 63 } 64 65 } 66 </script> 67 </body> 68 </html>
ajax結合formdata實作檔案上傳
案例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ height: 100px; width: 0%; background-color: #eee; } .myphoto { height: 100px; width: 100px; display: block; background-color: #ccc; } </style> </head> <body> <form action=""> <input type="file" name="img" id="img"> <br> <img src="" alt="" class="myphoto"> <input type="button" value="單擊上傳檔案" class="btn"> <div></div> </form> <script src="./js/jquery.min.js"></script> <script> //使用jQuery中的ajax $('#img').on('change',function(){ var formdata = new FormData() var myfile = document.querySelector('#img').files[0] formdata.append('img', myfile) $.ajax({ type:'post', url:'http://127.0.0.1:3002/uploadFile', data:formdata, dataType:'json', processData:false, contentType:false, success:function(res){ if (res.code == 200) { // 實作圖片預覽 $('.myphoto').attr('src', 'http://127.0.0.1:3002/images/' + res.img) } } }) }) </script> </body> </html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/228852.html
標籤：jQuery