php 下 html5 XHR2 + FormData + File API 上传文件
生活随笔
收集整理的這篇文章主要介紹了
php 下 html5 XHR2 + FormData + File API 上传文件
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
FormData的作用：
FormData對(duì)象可以幫助我們自動(dòng)的打包表單數(shù)據(jù)，通過(guò)XMLHttpRequest的send()方法來(lái)提交表單。當(dāng)然FormData也可以動(dòng)態(tài)的append數(shù)據(jù)。FormData的最大優(yōu)點(diǎn)就是我們可以異步上傳一個(gè)二進(jìn)制文件。 例1如下： <!DOCTYPE HTML> <html lang="zh-CN"> <head><meta charset="UTF-8"><title></title> </head> <body><form method="post" id="myForm" οnsubmit="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既可以從表單讀取數(shù)據(jù)，也可以動(dòng)態(tài)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，現(xiàn)在可以讓網(wǎng)頁(yè)要求用戶選擇本地文件，并且讀取這些文件的信息了。 通過(guò)File API，我們可以在用戶選取一個(gè)或者多個(gè)文件之后，訪問(wèn)到代表了所選文件的一個(gè)或多個(gè)File對(duì)象，這些對(duì)象被包含在一個(gè)FileList對(duì)象中。 <!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> 我們通過(guò)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() {//我們創(chuàng)建一個(gè)FormData對(duì)象var fd = new FormData();var file = upfile.files[0];//把文件添加到FormData對(duì)象中fd.append("file", file);var xhr = new XMLHttpRequest();xhr.onreadystatechange = function () {if (xhr.readyState == 4) {alert(this.responseText);}};xhr.open("post", "upfile.php", true);//發(fā)送FormData對(duì)象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"; } 使用對(duì)象URL來(lái)顯示你所選擇的圖片 通過(guò)window.URL.createObjectURL()和 window.URL.revokeObjectURL()兩個(gè)DOM方法。 這兩個(gè)方法創(chuàng)建簡(jiǎn)單的URL字符串對(duì)象，用于指向任何 DOM File 對(duì)象數(shù)據(jù)，包括用戶電腦中的本地文件。 <!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() {//創(chuàng)建一個(gè)img標(biāo)簽var img = document.createElement("img");//通過(guò)file對(duì)象創(chuàng)建對(duì)象URLimg.src = window.URL.createObjectURL(this.files[0]);img.height = 60;img.onload = function() {//釋放對(duì)象URLwindow.URL.revokeObjectURL(this.src);};document.body.appendChild(img);};myForm.onsubmit = function() {//我們創(chuàng)建一個(gè)FormData對(duì)象var fd = new FormData();var file = upfile.files[0];//把文件添加到FormData對(duì)象中fd.append("file", file);var xhr = new XMLHttpRequest();xhr.onreadystatechange = function () {if (xhr.readyState == 4) {alert(this.responseText);}};xhr.open("post", "upfile.php", true);//發(fā)送FormData對(duì)象xhr.send(fd);return false;}; </script> </html>?
總結(jié)
以上是生活随笔為你收集整理的php 下 html5 XHR2 + FormData + File API 上传文件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： JAVA大数_棋盘覆盖
- 下一篇： Shortest Distance fr