php 下 html5 XHR2 + FormData + File API 上傳檔案操作例項分析
阿新 • • 發佈：2020-03-02
本文例項講述了php 下 html5 XHR2 + FormData + File API 上傳檔案操作。分享給大家供大家參考，具體如下：
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",true);
//傳送FormData物件
xhr.send(fd);
return false;
};
</script>
</html>
更多關於PHP相關內容感興趣的讀者可檢視本站專題：《php檔案操作總結》、《PHP目錄操作技巧彙總》、《PHP常用遍歷演算法與技巧總結》、《PHP資料結構與演算法教程》、《php程式設計演算法總結》及《PHP網路程式設計技巧總結》
希望本文所述對大家PHP程式設計有所幫助。