【轉】Web 前沿——HTML5 Form Data 對象的使用

時間 2019-12-09

標籤 web 前沿 html5 html form data 對象使用欄目 HTML 简体版

原文原文鏈接

XMLHttpRequest Level 2 添加了一個新的接口——FormData。利用 FormData 對象，咱們能夠經過 JavaScript 用一些鍵值對來模擬一系列表單控件，咱們還可使用 XMLHttpRequest 的 send() 方法來異步的提交表單。與普通的 Ajax 相比，使用 FormData 的最大優勢就是咱們能夠異步上傳二進制文件。javascript

您可能感興趣的相關文章

建立一個FormData對象

　　你能夠先建立一個空的 FormData 對象,而後使用 append() 方法向該對象裏添加字段，以下：php

 
         var  
         oMyForm =  
         new  
         FormData(); 
        
         oMyForm.append( 
         "username" 
         ,  
         "Groucho" 
         ); 
        
         oMyForm.append( 
         "accountnum" 
         , 123456);  
         // 數字123456被當即轉換成字符串"123456" 
        
         // fileInputElement中已經包含了用戶所選擇的文件 
        
         oMyForm.append( 
         "userfile" 
         , fileInputElement.files[0]); 
        
         var  
         oFileBody =  
         "<a id=" 
         a 
         "><b id=" 
         b 
         ">hey!</b></a>" 
         ;  
         // Blob對象包含的文件內容 
        
         var  
         oBlob =  
         new  
         Blob([oFileBody], { type:  
         "text/xml" 
         }); 
        
         oMyForm.append( 
         "webmasterfile" 
         , oBlob); 
        
         var  
         oReq =  
         new  
         XMLHttpRequest(); 
        
         oReq.open( 
         "POST" 
         ,  
         "http://foo.com/submitform.php" 
         ); 
        
         oReq.send(oMyForm);

　　注：字段 "userfile" 和 "webmasterfile" 的值都包含了一個文件。經過 FormData.append() 方法賦給字段 "accountnum" 的數字被自動轉換爲字符（字段的值能夠是一個 Blob 對象，File對象或者字符串，剩下其餘類型的值都會被自動轉換成字符串）。css

　　在該例子中，咱們建立了一個名爲 oMyForm 的 FormData 對象，該對象中包含了名爲"username"，"accountnum"，"userfile" 以及 "webmasterfile" 的字段名，而後使用XMLHttpRequest的 send() 方法把這些數據發送了出去。"webmasterfile" 字段的值不是一個字符串,仍是一個 Blob 對象。html

使用HTML表單來初始化一個FormData對象

　　能夠用一個已有的 form 元素來初始化 FormData 對象，只須要把這個 form 元素做爲參數傳入 FormData 構造函數便可：html5

 
         var  
         newFormData =  
         new  
         FormData(someFormElement);

　　例如：java

 
         var  
         formElement = document.getElementById( 
         "myFormElement" 
         ); 
        
         var  
         oReq =  
         new  
         XMLHttpRequest(); 
        
         oReq.open( 
         "POST" 
         ,  
         "submitform.php" 
         ); 
        
         oReq.send( 
         new  
         FormData(formElement));

　　你還能夠在已有表單數據的基礎上，繼續添加新的鍵值對，以下：jquery

 
         var  
         formElement = document.getElementById( 
         "myFormElement" 
         ); 
        
         formData =  
         new  
         FormData(formElement); 
        
         formData.append( 
         "serialnumber" 
         , serialNumber++); 
        
         oReq.send(formData);

　　你能夠經過這種方式添加一些不想讓用戶編輯的固定字段,而後再發送.css3

使用FormData對象發送文件

　　你還可使用 FormData 來發送二進制文件.首先在 HTML 中要有一個包含了文件輸入框的 form 元素：web

 
         <form enctype= 
         "multipart/form-data"  
         method= 
         "post"  
         name= 
         "fileinfo" 
         > 
        
         <label>Your email address:</label> 
        
         <input type= 
         "email"  
         autocomplete= 
         "on"  
         autofocus name= 
         "userid"  
         placeholder= 
         "email"  
         required size= 
         "32"  
         maxlength= 
         "64"  
         /><br /> 
        
         <label>Custom file label:</label> 
        
         <input type= 
         "text"  
         name= 
         "filelabel"  
         size= 
         "12"  
         maxlength= 
         "32"  
         /><br /> 
        
         <label>File to stash:</label> 
        
         <input type= 
         "file"  
         name= 
         "file"  
         required /> 
        
         </form> 
        
         <div id= 
         "output" 
         ></div> 
        
         <a href= 
         "javascript:sendForm()" 
         >Stash the file!</a>

　　而後你就可使用下面的代碼來異步的上傳用戶所選擇的文件：ajax

 
         function  
         sendForm() { 
        
         var  
         oOutput = document.getElementById( 
         "output" 
         ); 
        
         var  
         oData =  
         new  
         FormData(document.forms.namedItem( 
         "fileinfo" 
         )); 
        
         oData.append( 
         "CustomField" 
         ,  
         "This is some extra data" 
         ); 
        
         var  
         oReq =  
         new  
         XMLHttpRequest(); 
        
         oReq.open( 
         "POST" 
         ,  
         "stash.php" 
         ,  
         true 
         ); 
        
         oReq.onload =  
         function 
         (oEvent) { 
        
         if  
         (oReq.status == 200) { 
        
         oOutput.innerHTML =  
         "Uploaded!" 
         ; 
        
         }  
         else  
         { 
        
         oOutput.innerHTML =  
         "Error "  
         + oReq.status +  
         " occurred uploading your file.<br \/>" 
         ; 
        
         } 
        
         }; 
        
         oReq.send(oData); 
        
         }

　　你還能夠不借助 HTML 表單，直接向 FormData 對象中添加一個 File 對象或者一個 Blob 對象：

 
         data.append( 
         "myfile" 
         , myBlob);

　　若是 FormData 對象中的某個字段值是一個 Blob 對象，則在發送 HTTP 請求時，表明該 Blob 對象所包含文件的文件名的 "Content-Disposition" 請求頭的值在不一樣的瀏覽器下有所不一樣，Firefox使用了固定的字符串"blob"，而 Chrome 使用了一個隨機字符串。

　　你還可使用 jQuery 來發送 FormData，但必需要正確的設置相關選項：

 
         var  
         fd =  
         new  
         FormData(document.getElementById( 
         "fileinfo" 
         )); 
        
         fd.append( 
         "CustomField" 
         ,  
         "This is some extra data" 
         ); 
        
         $.ajax({ 
        
         url:  
         "stash.php" 
         , 
        
         type:  
         "POST" 
         , 
        
         data: fd, 
        
         processData:  
         false 
         ,   
         // 告訴jQuery不要去處理髮送的數據 
        
         contentType:  
         false    
         // 告訴jQuery不要去設置Content-Type請求頭 
        
         });