<del id="2uq20"></del>

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

EdwardUp 發布于2019-08-21 17:57 / 1686人閱讀

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

一、概述

FormData 對象的使用：
1.用一些鍵值對來模擬一系列表單控件：即把form中所有表單元素的name與value組裝成
一個queryString
2. 異步上傳二進制文件。

二、使用

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

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

2.使用FormData對象發送文件

HTML部分

        
            姓名: 
        
        
            文件：
        
        
            
        

JS部分
var btn = document.querySelector("[type=button]");
btn.onclick = function () {
    // 文件元素
    var file = document.querySelector("[type=file]");
    // 通過FormData將文件轉成二進制數據
    var formData = new FormData();
    // 將文件轉二進制
    *****注意2******
    formData.append("upload", file.files[0]);
    *****注意1******
    var xhr = new XMLHttpRequest;
    xhr.open("post", "file.php");
    // 監聽上傳進度
    xhr.upload.onprogress = function (ev) {
    // 事件對象
    // 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封裝的數據
    dataType: "JSON",
    cache: false,                      // 不緩存
    processData: false,                // jQuery不要去處理發送的數據
    contentType: false,                // jQuery不要去設置Content-Type請求頭
    success:function (data) {           //成功回調
        console.log(data);
    }
});

注意2：參數
new FormData的參數是一個DOM對象，而非jQuery對象

var formData = new FormData($("#file")[0]);

三、jQuery的參數序列化方法serialize()

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90264.html

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

摘要：還特別介紹一種用使用對象上傳文件的方法。設置為上傳文件不需要緩存。用上傳文件因為不是所有瀏覽器都支持的，所以有時候需要用來實現文件上傳的功能。用AJAX上傳文件，一般都是用FormData對象。 FormData對象，是可以使用一系列的健值對來模擬一個完整的表單，然后使用XMLHttpRequest發送這個表單。 FormData的使用創建一個空的FormData對象，然后再用...

Dean 2019-08-20 14:48 評論0 收藏0
antd 和 element上傳文件詳解與FormData詳解

摘要：當用戶完成選擇文件動作時，提交子頁面中的。從此我們上傳文件就歡欣鼓舞的來找了。因為的核心是對象，異步的實現是通過一個對象，一般簡稱該對象對。這些回答基于自己理解，如有不妥，希望路過的大神輕噴，指正。背景平時工作中經常會遇到需要上傳文件的情況，如果你用ant design 或者element ,它們都提供了上傳的組件。我們分別來看一下element 和 antd 手動上傳怎么處理：...

Fundebug 2019-08-23 10:29 評論0 收藏0
「每日一瞥

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

XboxYan 2019-08-23 15:16 評論0 收藏0
七牛云上傳及上傳方法封裝

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

Muninn 2019-08-26 13:33 評論0 收藏0