本文實例講述了php 下 html5 XHR2 + FormData + File API 上傳文件操作。分享給大家供大家參考，具體如下：
FormData的作用：
FormData對象可以幫助我們自動的打包表單數(shù)據(jù)，通過XMLHttpRequest的send()方法來提交表單。當(dāng)然FormData也可以動態(tài)的append數(shù)據(jù)。FormData的最大優(yōu)點就是我們可以異步上傳一個二進(jìn)制文件。
例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既可以從表單讀取數(shù)據(jù)，也可以動態(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)頁要求用戶選擇本地文件，并且讀取這些文件的信息了。
通過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() {
//我們創(chuàng)建一個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);
//發(fā)送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方法。
這兩個方法創(chuàng)建簡單的URL字符串對象，用于指向任何 DOM File 對象數(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)建一個img標(biāo)簽
var img = document.createElement("img");
//通過file對象創(chuàng)建對象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() {
//我們創(chuàng)建一個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);
//發(fā)送FormData對象
xhr.send(fd);
return false;
};
/script>
/html>
更多關(guān)于PHP相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《php文件操作總結(jié)》、《PHP目錄操作技巧匯總》、《PHP常用遍歷算法與技巧總結(jié)》、《PHP數(shù)據(jù)結(jié)構(gòu)與算法教程》、《php程序設(shè)計算法總結(jié)》及《PHP網(wǎng)絡(luò)編程技巧總結(jié)》
希望本文所述對大家PHP程序設(shè)計有所幫助。
您可能感興趣的文章:- html form表單基礎(chǔ)入門案例講解
- HTML的form表單和django的form表單
- PHP使用HTML5 FormData對象提交表單操作示例
- Asp.net webForm設(shè)置允許表單提交Html的方法
- Java Web使用Html5 FormData實現(xiàn)多文件上傳功能
- transform實現(xiàn)HTML5 video標(biāo)簽視頻比例拉伸實例詳解
- C#通過html調(diào)用WinForm的方法
- HTML form表單提交方法案例詳解
