發這篇博客的時候我是自己在研究這個XMLHttpRequest請求，在別人的博客上面知道XMLHttpRequest新加了一個FormData的東西，好像現在APP請求后台也有用這種方式的吧。
別的不多說，我一直在糾結js怎樣獲取到form表單中file類型的值，或者說是數據。一直沒有找到方法，前兩天看了一個博客，他是通過Form表單來初始化FormData，得到 一個對象然后通過Ajax方式將文件數據發送到PHP文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>測試FormData方式上傳文件</title> <style> body{margin: 0;padding: 50px 0 0 0;} .topDiv{margin-left: 40%; margin-top: 200px; float: left; position: absolute;} .topDiv ul li{list-style: none; margin-top: 10px;} .topDiv ul li label{color: #999;} .topDiv ul li input{width: 150px;} </style> </head> <body> <div class="topDiv" align="center"> <form> <ul> <li> <label>圖片名稱:</label> <input type="text" name="name" id="name" value=""> </li> <li> <label>圖片上傳:</label> <img src="http://usr.im/100x50" width="150" height="100"> </li> <li> <input type="button" onclick="onFormPost()" value="提交"> </li> </ul> </form> <form id="formData" style="display: none"> <ul> <li> <label>選擇圖片:</label> <input type="file" name="file" onchange="onFormPost()" value=""> </li> </ul> </form> </div> </body> <script type="text/javascript" src="../Public/js/jquery-2.1.4.min.js?ver=1"></script> <script> function onFormPost(){ var myForm=new FormData(document.getElementById('formData')); // myForm.append("name",document.getElementById('name').value); // myForm.append("file",document.getElementsByName("file").files[0]) // var myXhr=new XMLHttpRequest(); // myXhr.open("post","upload.php"); // myXhr.send(myForm); $.ajax({ url: "upload.php", type: "POST", data: myForm, processData: false, // 告訴jQuery不要去處理發送的數據 contentType: false, // 告訴jQuery不要去設置Content-Type請求頭 success:function(data){ alert(data); },error:function(){ } }); } </script> </html>
然后只需要在upload.php文件處理上傳