原理:
借用隱藏的iframe來實(shí)現(xiàn)異步上傳
1. 客戶端
//1.php
<!doctype html>
<div>
<iframe name=targetIframe></iframe>
<form
id=uploadForm
method=post
action=2.php
enctype=multipart/form-data
target=targetIframe>
<input type=file name=file />
</form>
<input id=upload type=button value=upload />
<script>
document.querySelector('#upload').onclick=function(){
document.querySelector('#uploadForm').submit();
};
</script>
</div>
注意:
(1)form.method=post
(2)form.enctype=multipart/form-data
(3)form.target=iframe.name
這里是借用了一個(gè)iframe來顯示form.action頁(yè)面,
即表單提交后iframe.src= form.action
如果不設(shè)置的話,會(huì)在當(dāng)前頁(yè)面顯示form.action。
2. 服務(wù)器端
//2.php
<?php
$fileName=$_FILES["file"]["name"];
$originFilePath=$_FILES["file"]["tmp_name"];
$targetFilePath="uploadfiles/".time().$fileName;
$result=move_uploaded_file($originFilePath,$targetFilePath);
echo $result?"Success":"Failed";
?>
注意:
(1)文件首先上傳到服務(wù)器的臨時(shí)地址,然后使用move_uploaded_file拷貝到目標(biāo)地址
(2)$_FILES["file"]中的file,是表單元素<input type=file name=file />的name屬性值
(3)$_FILES["file"]["name"];和$_FILES["file"]["tmp_name"];中的name和tmp_name,
是$_FILES["file"]的內(nèi)置屬性,分別表示原文件名和在服務(wù)器上的臨時(shí)地址。