国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

new FormData() - FormData對(duì)象的作用及用法

EdwardUp / 1694人閱讀

摘要：一概述對(duì)象的使用用一些鍵值對(duì)來(lái)模擬一系列表單控件即把中所有表單元素的與組裝成一個(gè)異步上傳二進(jìn)制文件。二使用對(duì)象的操作方法，全部在原型中，自己本身沒任何的屬性及方法。

一、概述 
FormData 對(duì)象的使用：
1.用一些鍵值對(duì)來(lái)模擬一系列表單控件：即把form中所有表單元素的name與value組裝成
一個(gè)queryString
2. 異步上傳二進(jìn)制文件。
二、使用

1.FormData對(duì)象的操作方法，全部在原型中，自己本身沒任何的屬性及方法。

let formData = new FormData()
formData.append("user", "zhang")
獲取 formData.get("user")  //zhang
刪除 formData.delete("user")
.....

2.使用FormData對(duì)象發(fā)送文件

HTML部分


        
        
        


JS部分
var btn = document.querySelector("[type=button]");
btn.onclick = function () {
    // 文件元素
    var file = document.querySelector("[type=file]");
    // 通過FormData將文件轉(zhuǎn)成二進(jìn)制數(shù)據(jù)
    var formData = new FormData();
    // 將文件轉(zhuǎn)二進(jìn)制
    *****注意2******
    formData.append("upload", file.files[0]);
    *****注意1******
    var xhr = new XMLHttpRequest;
    xhr.open("post", "file.php");
    // 監(jiān)聽上傳進(jìn)度
    xhr.upload.onprogress = function (ev) {
    // 事件對(duì)象
    // console.log(ev);

        var percent = (ev.loaded / ev.total) * 100 + "%";

        console.log(percent);

        progress.style.width = percent;
    }

    xhr.send(formData);

    xhr.onreadystatechange = function () {
            if(xhr.readyState == 4 && xhr.status == 200) {
                    //
            }
    }
}

注意1：使用jQuery

 $.ajax({
    url: "file.php",
    type: "POST",
    data: formdata,                    // 上傳formdata封裝的數(shù)據(jù)
    dataType: "JSON",
    cache: false,                      // 不緩存
    processData: false,                // jQuery不要去處理發(fā)送的數(shù)據(jù)
    contentType: false,                // jQuery不要去設(shè)置Content-Type請(qǐng)求頭
    success:function (data) {           //成功回調(diào)
        console.log(data);
    }
});

注意2：參數(shù)
new FormData的參數(shù)是一個(gè)DOM對(duì)象，而非jQuery對(duì)象

var formData = new FormData($("#file")[0]);
三、jQuery的參數(shù)序列化方法serialize()

序列表表格內(nèi)容為字符串，用于 Ajax 請(qǐng)求。
$("form").serialize()

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/90264.html

相關(guān)文章

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

    摘要：還特別介紹一種用使用對(duì)象上傳文件的方法。設(shè)置為上傳文件不需要緩存。用上傳文件因?yàn)椴皇撬袨g覽器都支持的，所以有時(shí)候需要用來(lái)實(shí)現(xiàn)文件上傳的功能。 用AJAX上傳文件，一般都是用FormData對(duì)象。 FormData對(duì)象，是可以使用一系列的健值對(duì)來(lái)模擬一個(gè)完整的表單，然后使用XMLHttpRequest發(fā)送這個(gè)表單。 FormData的使用 創(chuàng)建一個(gè)空的FormData對(duì)象，然后再用...

    Dean 評(píng)論0 收藏0

  • antd 和 element上傳文件詳解與FormData詳解

    摘要：當(dāng)用戶完成選擇文件動(dòng)作時(shí)，提交子頁(yè)面中的。從此我們上傳文件就歡欣鼓舞的來(lái)找了。因?yàn)榈暮诵氖菍?duì)象，異步的實(shí)現(xiàn)是通過一個(gè)對(duì)象，一般簡(jiǎn)稱該對(duì)象對(duì)。這些回答基于自己理解，如有不妥，希望路過的大神輕噴，指正。 背景 平時(shí)工作中經(jīng)常會(huì)遇到需要上傳文件的情況，如果你用ant design 或者element ,它們都提供了上傳的組件。 我們分別來(lái)看一下element 和 antd 手動(dòng)上傳怎么處理：...

    Fundebug 評(píng)論0 收藏0

  • 「每日一瞥

    摘要：首先，我們需要一個(gè)基本框架來(lái)處理表單域變化和表格提交。最起碼我們需要提供一個(gè)來(lái)告訴如果用戶還沒有對(duì)表單域進(jìn)行改動(dòng)，就不必展示錯(cuò)誤。我們需要一個(gè)來(lái)標(biāo)識(shí)用戶已嘗試提交表單，還需要來(lái)標(biāo)識(shí)表單是否正在提交以及每個(gè)表單域是否正在進(jìn)行異步校驗(yàn)。 showImg(https://segmentfault.com/img/remote/1460000017516912?w=1200&h=630); ...

    XboxYan 評(píng)論0 收藏0

  • 七牛云上傳及上傳方法封裝

    摘要：分片及七牛云上傳封裝項(xiàng)目里面用到七牛云，有分片和簡(jiǎn)單上傳在此做下簡(jiǎn)單的記錄，分享下面是分片上傳封裝是我寫在里面分片的大小如分片項(xiàng)目是框架，請(qǐng)求是。 分片及七牛云上傳封裝項(xiàng)目里面用到七牛云，有分片和簡(jiǎn)單上傳 在此做下簡(jiǎn)單的記錄，分享 下面是分片上傳封裝 process.env.MAX_FILESIZE 是我寫在config里面分片的大小 如1024102410 10MB分片 項(xiàng)目是vue...

    Muninn 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<