XMLHttpRequest 2.0 - FormData

時間 2020-11-30

標籤 html jquery ajax json 數組 app 異步 post url 欄目 HTML 简体版

原文原文鏈接

FormData :

a) 提供了一個新的內建對象，可用於管理表單數據html

b) 首先要獲取一個表單元素formjquery

c) 而後在實例化時 new FormData(form)，將表單元素form傳進去ajax

d) 會返回一個對象，此對象能夠直接作爲xhr.send(formData)的參數json

e) 此時咱們的數據就是以二進制形式傳遞了數組

f) 注意咱們這裏只能以post形式傳遞app

案例:異步

 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) 咱們上傳文件是以二進制形式傳遞的post

b) 咱們能夠經過表單<input type="file">獲取到一個文件對象ui

c) 而後file.files[0]能夠獲取文件信息url

d) 而後再利用var formData = 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。