標籤：方法 表單 line app als upload hang email xhr
FormData的作用：
FormData對象可以協助我們自動的打包表單資料，通過XMLHttpRequest的send()方法來提交表單。當然FormData也可以動態append資料。FormData的最大優點就是我們可以非同步上傳一個二進位檔案。例1如下：<!DOCTYPE HTML><html lang="zh-CN"><head> <meta charset="UTF-8"> <title></title></head><body> <form method="post" id="myForm" onsubmit="return post();"> 使用者名稱<input type="text" name="uname" /> 密碼<input type="password" name="upwd" /> 郵箱<input type="text" name="uemail" /> <input type="submit" name="submit" value="提交" /> </form></body><script type="text/javascript">function post() { var myForm = document.getElementById("myForm"); //FormData既可以從表單讀取資料，也可以動態append(鍵,值)添加 var fd = new FormData(myForm); var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState == 4) { alert(this.responseText); } }; xhr.open("post", "post.php", true); xhr.send(fd); return false;}</script></html>
File API使用HTML5 DOM新增的File API，現在可以讓網頁要求使用者選擇本地檔案，並且讀取這些檔案的資訊了。通過File API，我們可以在使用者選取一個或者多個檔案之後，訪問到代表了所選檔案的一個或多個File對象，這些對象被包含在一個FileList對象中。
<!DOCTYPE HTML><html lang="zh-CN"><head> <meta charset="UTF-8"> <title></title></head><body> <form method="post" id="myForm"> <input type="file" name="file" id="upfile" /> <input type="submit" name="submit" value="提交" /> </form></body><script type="text/javascript"> var upfile = document.getElementById("upfile"); upfile.onchange = function() { var file = this.files[0]; alert("檔案名稱:" + file.name + "\r\n" + "大小:" + file.size + "\r\n"); };</script></html>我們通過FormData + File API 上傳檔案
<!DOCTYPE HTML><html lang="zh-CN"><head> <meta charset="UTF-8"> <title></title></head><body> <form method="post" id="myForm"> <input type="file" name="file" id="upfile" /> <input type="submit" name="submit" value="提交" /> </form></body><script type="text/javascript"> var myForm = document.getElementById("myForm"); var upfile = document.getElementById("upfile"); myForm.onsubmit = function() { //我們建立一個FormData對象 var fd = new FormData(); var file = upfile.files[0]; //把檔案添加到FormData對象中 fd.append("file", file); var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState == 4) { alert(this.responseText); } }; xhr.open("post", "upfile.php", true); //發送FormData對象 xhr.send(fd); return false; };</script></html>upfile.php代碼如下：
<?php$uploadDir = ‘./upload/‘;if(!file_exists($uploadDir)) { @mkdir($uploadDir, 0777, true);}$uploadFile = $uploadDir . basename($_FILES[‘file‘][‘name‘]);if(move_uploaded_file($_FILES[‘file‘][‘tmp_name‘], $uploadFile)) { echo "OK";} else { echo "NO";}使用對象URL來顯示你所選擇的圖片通過window.URL.createObjectURL()和 window.URL.revokeObjectURL()兩個DOM方法。這兩個方法建立簡單的URL字串對象，用於指向任何 DOM File 對象資料，包括使用者電腦中的本地檔案。
<!DOCTYPE HTML><html lang="zh-CN"><head> <meta charset="UTF-8"> <title></title></head><body> <form method="post" id="myForm"> <input type="file" name="file" id="upfile" /> <input type="submit" name="submit" value="提交" /> </form></body><script type="text/javascript"> var myForm = document.getElementById("myForm"); var upfile = document.getElementById("upfile"); upfile.onchange = function() { //建立一個img標籤 var img = document.createElement("img"); //通過file對象建立對象URL img.src = window.URL.createObjectURL(this.files[0]); img.height = 60; img.onload = function() { //釋放對象URL window.URL.revokeObjectURL(this.src); }; document.body.appendChild(img); }; myForm.onsubmit = function() { //我們建立一個FormData對象 var fd = new FormData(); var file = upfile.files[0]; //把檔案添加到FormData對象中 fd.append("file", file); var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState == 4) { alert(this.responseText); } }; xhr.open("post", "upfile.php", true); //發送FormData對象 xhr.send(fd); return false; };</script></html>
php 下 html5 XHR2 + FormData + File API 上傳檔案
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
