AJAX檔案上傳實踐與分析，帶HTML5檔案上傳API。

標籤：

　　對於HTML5已經支援AJAX檔案上傳了，但如果需要相容的話還是得用一點小技巧的，HTML5等等介紹，先來看看以前我們是怎麼寫的。

　　網上可能會有一些叫AJAX檔案上傳外掛程式，但在AJAX2.0之前是不可能實現的，因為瀏覽器的原因，AJAX根本擷取不了檔案資訊，當然這裡並不是說就不能檔案上傳了，只是說在AJAX2.0之前所謂的AJAX檔案上傳都是假冒的，核心更本沒有用AJAX，而是利用iframe實現的，下面我們來看看如何利用iframe實現頁面無重新整理上傳檔案。

 

iframe無重新整理上傳檔案版。

html：

<form action="http://127.0.0.1/index.php" method="POST" target="postFile" enctype="multipart/form-data">
　　<input type="file" name="fs">
　　<input type="submit" value="上傳">
</form>
<iframe name="postFile" frameborder="0"></iframe>

php：

<?php
　　if(empty($_FILES)){
　　　　exit(‘空檔案‘);
　　}
　　if($_FILES[‘fs‘][‘error‘]!=0){
　　　　exit(‘上傳失敗‘);
　　}
　　// 移動臨時檔案到a目錄下
　　move_uploaded_file($_FILES[‘fs‘][‘tmp_name‘],‘a/‘.$_FILES[‘fs‘][‘name‘]);

　　echo ‘ok‘;
?>

效果：

 

可以看到頁面並沒有被重新整理。

原理就是將form裡面的資料提交到iframe架構裡面。

 

給使用者提示個正著上傳比較好一些。

html：

<style>
#img{
display:none;
}
</style>

 

<form action="http://127.0.0.1/index.php" method="POST" target="postFile" enctype="multipart/form-data">
　　<input type="file" name="fs">
　　<input type="submit" value="上傳">
</form>
<img src="loader.png" id="img">
<iframe name="postFile" frameborder="0"></iframe>
<script>
　　var form = document.getElementsByTagName(‘form‘)[0];
　　var img = document.getElementById(‘img‘);
　　form.onsubmit = function(){
　　　　img.style.display = ‘block‘;
　　};
</script>

php：

<?php
if(empty($_FILES)){
　　exit(‘空檔案‘);
}
if($_FILES[‘fs‘][‘error‘]!=0){
　　exit(‘上傳失敗‘);
}

// 移動臨時檔案到a目錄下
move_uploaded_file($_FILES[‘fs‘][‘tmp_name‘],‘a/‘.$_FILES[‘fs‘][‘name‘]);

// 檔案上傳成功以後將提示隱藏。

echo ‘<script>parent.document.getElementById("img").style.display="none";</script>‘;

echo ‘ok‘;
?>

 

ok。不過這種方式雖然可以實現但多少有些不足，比如無法知道檔案到底上傳了多少。接下來介紹HTML5新增的API，非常強大。

 

html5新增了一個FormData對象，它可以用來動作表單。

 

例子1：上傳檔案

<form action="http://127.0.0.1/index.php" method="POST" enctype="multipart/form-data">
　　<input type="file" name="fs">
　　<input id="btn" type="button" value="上傳">
</form>
<img src="loader.png" id="img">

<script>
var form = document.getElementsByTagName(‘form‘)[0];
var btn = document.getElementById(‘btn‘);
var img = document.getElementById(‘img‘);

btn.onclick = function(){
　　var formData = new FormData(form);
　　ajax(formData);

　　img.style.display = ‘block‘;
};

function ajax(data){
　　var xhr = new XMLHttpRequest();
　　xhr.open(‘POST‘,‘http://127.0.0.1/index.php‘);
　　xhr.send(data);
　　xhr.onreadystatechange = function(){
　　　　if(this.readyState===4 && this.status===200){
　　　　　　if(this.responseText===‘1‘){
　　　　　　　　parent.document.getElementById("img").style.display="none";
　　　　　　　　console.log(‘ok‘);
　　　　　　}
　　　　}
　　};
}
</script>

直接把form表單傳到FormData中就可以了，它內部會幫你處理。除了上傳檔案以外，FormData還有很多功能，比如之前我們提交表單還得一個一個動作表單的值，現在我們通過直接把form寫進去的可以達到同樣的效果，一起來看看。

和上傳圖片一樣，就不貼代碼了。

除了這個，FormData還允許你手動建立資料。

 

使用方法如下：

var formData = new FormData();
formData.append(‘sex‘,‘男‘);

 

不得不說這個方法還是很強大的，擁有這個方法我們可以幹很多事。

 

 關於檔案的還新增了一個files屬性，來看看。

 

通過files屬性我們可以得到檔案的大小以及檔案名稱等，另外還可以將這個對象傳到FormData裡面當檔案上傳。

 

有了它我們還可以做圖片預覽功能噢，不過需要配合window.URL.createObjectURL來操作。

var f = document.getElementById(‘f‘).files[0];

var img = new Image();
img.src = window.URL.createObjectURL(f);
document.body.appendChild(img);

 

ok。

 

AJAX檔案上傳實踐與分析，帶HTML5檔案上傳API。