主程式 index.php
<!DOCTYPE html>
<html>
<head>
<script>
function _(el){
return document.getElementById(el);
}
function uploadFile(){
var files = document.getElementById('file1').files;
//設定目前要傳的是哪個檔案(3)
var i = files.length-document.getElementById('test').value;
var file = _("file1").files[i];
var formdata = new FormData();
formdata.append("file1", file);
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.addEventListener("load", completeHandler, false);
ajax.addEventListener("error", errorHandler, false);
ajax.addEventListener("abort", abortHandler, false);
ajax.open("POST", "upload.php");
ajax.send(formdata);
}
function uploadctrl(){
//將檔案總數傳到test裡面紀錄(1)
var files = document.getElementById('file1').files;
document.getElementById('test').value=files.length;
document.getElementById('progressBar').style.visibility="";
//送出傳送檔案指令(2)
uploadFile();
}
function progressHandler(event){
var files = document.getElementById('file1').files;
var j = files.length-document.getElementById('test').value+1;
var percent = (event.loaded / event.total) * 100;
_("progressBar").value = Math.round(percent);
_("status").innerHTML = Math.round(percent)+"% 第"+j+"個檔案上傳中... 請稍後一下";
}
function completeHandler(event){
_("status").innerHTML = event.target.responseText;
_("progressBar").value = 0;
//要設定>1，最小只能是2，不然會多傳一次空值
if (parseInt(document.getElementById('test').value)>1){
//一個檔案傳送完畢之後，將test裡面的數值-1 (4)
document.getElementById('test').value=parseInt(document.getElementById('test').value)-1;
//重新傳送檔案(5)
uploadFile();
}else{
//test裡面的數值為0，代表檔案上傳完畢，將視窗重整(6)
document.getElementById('progressBar').style.visibility="hidden";
//延遲一秒後重整 window.setTimeout("location.reload();",1000);
}
}
function errorHandler(event){
_("status").innerHTML = "Upload Failed";
}
function abortHandler(event){
_("status").innerHTML = "Upload Aborted";
}
</script>
</head>
<body>
//用來接收目前檔案傳送數量的隱藏欄位
<input type='hidden' name='test' id='test' size='10' value='0'> <form id="upload_form" enctype="multipart/form-data" method="post">
<input type="file" name="file1[]" id="file1" multiple><br>
<input type="button" value="upload" onclick="uploadctrl()">
<progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
<h3 id="status"></h3>
<p id="loaded_n_total"></p>
</form>
</body>
</html>
接收端程式 upload.php
<?php
$fileName = $_FILES["file1"]["name"]; // The file name
$fileTmpLoc = $_FILES["file1"]["tmp_name"]; // File in the PHP tmp folder
$fileType = $_FILES["file1"]["type"]; // The type of file it is
$fileSize = $_FILES["file1"]["size"]; // File size in bytes
$fileErrorMsg = $_FILES["file1"]["error"]; // 0 for false... and 1 for true
if (!$fileTmpLoc) { // if file not chosen
echo "ERROR: Please browse for a file before clicking the upload button.";
exit();
}
if(move_uploaded_file($fileTmpLoc, "mydir/$fileName")){
echo "$fileName upload is complete";
} else {
echo "move_uploaded_file function failed";
}
?>
沒有留言:
張貼留言