HTML5中FormData物件的使用

阿新 • • 發佈：2019-01-06

FormData物件是HTML5的一個物件，目前的已經可以相容一些主流的瀏覽器。當然了，如果你的專案還需要相容IE8之類的低版本瀏覽器，這個好用的方法註定與你無緣啦。（不過你可以考慮jquery.form.js這種表單外掛，同樣容易上手）。

FormData在使用的時候可以不使用html程式碼程式碼的情況下，向後端提交資料，譬如下面這段程式碼：

var form = new FormData();
form.append("username","test");
form.append("password",123456);

// 可以這樣傳送資料
var req = new XMLHttpRequest();
req. 
open("post", "URL", false);
req.send(form); 

// 當然也可以這樣
$.ajax({
    url:"URL",
    type:"post",
    data:form,
    processData:false,
    contentType:false,
    success:function(data){
        window.clearInterval(timer);
        console.log(data);
    }
});

當然FormData必然不止這麼一個好處啦，FormData物件還支援從form表單中直接提取資料，然後直接提交給後臺。

另外值得一提的是，這種方式還可以上傳檔案內容，參考如下：

html部分

<form id="myform">
    <input type="file" name="img"/>
    <input type="text" name="username"/>
    <input type="button" value="提交" onclick="test();"/>
 </form>

js部分

function test(){
    var form = new FormData(document.getElementById("myform" 
));
    // var req = new XMLHttpRequest();
    // req.open("post", "URL", false);
    // req.send(form);
    $.ajax({
        url:"URL",
        type:"post",
        data:form,
        processData:false,
        contentType:false,
        success:function(data){
            window.clearInterval(timer);
            console.log(data);
        },
        error:function(e){
            alert("error!!!");
            window.clearInterval(timer);
        }
    });        
    get(); //此處為上傳檔案的進度條
}

參考上面，使用FormData，在構造這個物件的時候，把表單的物件，作為一個引數放進去，就可以了，然後FormData，就會得到這個表單物件裡面的所有的引數，甚至我們在表單中，都不需要宣告enctype =”multipart/form-data” ，就可以直接提交。

注意：使用FormData提交的時候，大家會注意到表單提交的是request payload，具體有興趣的同學可以自己百度，它不是之前的Form data提交的，所以後臺也是要經過處理的，比如springMVC就需要配置

<!-- 配置nultipartresolver,注意：id名必須這樣寫，不然會報錯 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <property name="defaultEncoding" value="UTF-8"></property>
    <property name="maxInMemorySize" value="10240000"></property>
</bean>

HTML5中FormData物件的使用

HTML5中FormData物件的使用

HTML5中history物件解析及前端路由實現封裝流程

PHP結合HTML5使用FormData物件提交表單及上傳圖片

HTML5利用FormData物件實現顯示進度條的檔案上傳【譯】

HTML5中Audio物件volume屬性的應用

jquery中獲取原生事件物件來解決html5中拖拽事件的bug

使用HTML5中的Blob物件實現媒體播放功能

html5中video視頻只有聲音沒有圖像

辛星淺析html5中的role屬性

關於HTML5中Video標簽無法播放mp4的解決辦法

html5中制作loading圖標和圖片預覽代碼詳解

HTML5中新增的元素

全棧JavaScript之路（十四）HTML5 中與class屬性相關的擴充

在 HTML5 中捕獲音頻和視頻

html5中audio的詳細使用

html5中的Web Storage包括了兩種存儲方式：sessionStorage和localStorage。

html5中不再支持的元素

使用html5中video自定義播放器必備知識點總結以及JS全屏API介紹

第89天：HTML5中訪問歷史、全屏和網頁存儲API

HTML5中window.postMessage，在兩個頁面之間的數據傳遞

HTML5中FormData物件的使用

相關推薦