使用FormData物件

FormData物件是html5的一個物件，目前的一些主流的瀏覽器都已經相容，非常的強大

FormData可以憑空建立一個物件，然後往這個物件裡面新增資料，然後直接提交，不需要寫一行html程式碼，如下：

var form = new FormData();
form.append("username","zxj");
form.append("password",123456);
var req = new XMLHttpRequest();
req.open("post", "${pageContext.request.contextPath}/public/testupload", false);
req.send(form);

這樣就可以向瀏覽器傳送表單資料了，或者也可以使用Jquery這樣傳送：

 var form = new FormData();
  form.append("username","zxj");
  form.append("password",123456);
　$.ajax({
                url:"${pageContext.request.contextPath}/public/testupload",
                type:"post",
                data:form,
                processData:false,
                contentType:false,
                success:function(data){
                    window.clearInterval(timer);
                    console.log("over..");
                }
});

FormData還支援直接從html中的表單生成資料，就是在html頁面中已經有資料了，然後FormData可以直接把這個表單的資料寫入這個物件，然後直接提交給後臺

程式碼如下，先給出html程式碼:

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

FormData還支援困擾眾多開發者已久的ajax的上傳檔案，以前我們上傳檔案，需要寫一個表單直接重新整理提交，但是這裡不需要，下面給出提交程式碼：

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