php ajax实现文件上传进度条
本实例是关于php文件上传时进度条的实现，主要采用ajax技术，另外还运用了html5，有需要的朋友可以研究一下。
本实例有两个文件：
upload_form.html：
<!DOCTYPEhtml>
<html>
<head>
<script>
function_(el){
returndocument.getElementById(el);
}
functionuploadFile(){
varfile=_("file1").files[0];
//alert(file.name+"|"+file.size+"|"+file.type);
varformdata=newFormData();
formdata.append("file1",file);
varajax=newXMLHttpRequest();
ajax.upload.addEventListener("progress",progressHandler,false);
ajax.addEventListener("load",completeHandler,false);
ajax.addEventListener("error",errorHandler,false);
ajax.addEventListener("abort",abortHandler,false);
ajax.open("POST","file_upload_parser.php");
ajax.send(formdata);
}
functionprogressHandler(event){
_("loaded_n_total").innerHTML="Uploaded"+event.loaded+"bytesof"+event.total;
varpercent=(event.loaded/event.total)*100;
_("progressBar").value=Math.round(percent);
_("status").innerHTML=Math.round(percent)+"%uploaded...pleasewait";
}
functioncompleteHandler(event){
_("status").innerHTML=event.target.responseText;
_("progressBar").value=0;
}
functionerrorHandler(event){
_("status").innerHTML="UploadFailed";
}
functionabortHandler(event){
_("status").innerHTML="UploadAborted";
}
</script>
</head>
<body>
<h2>HTML5FileUploadProgressBarTutorial</h2>
<formid="upload_form"enctype="multipart/form-data"method="post">
<inputtype="file"name="file1"id="file1"><br>
<inputtype="button"value="UploadFile"onclick="uploadFile()">
<progressid="progressBar"value="0"max="100"style="width:300px;"></progress>
<h3id="status"></h3>
<pid="loaded_n_total"></p>
</form>
</body>
</html>
file_upload_parser.php：
<?php
$fileName=$_FILES["file1"]["name"];//Thefilename
$fileTmpLoc=$_FILES["file1"]["tmp_name"];//FileinthePHPtmpfolder
$fileType=$_FILES["file1"]["type"];//Thetypeoffileitis
$fileSize=$_FILES["file1"]["size"];//Filesizeinbytes
$fileErrorMsg=$_FILES["file1"]["error"];//0forfalse...and1fortrue
if(!$fileTmpLoc){//iffilenotchosen
echo"ERROR:Pleasebrowseforafilebeforeclickingtheuploadbutton.";
exit();
}
if(move_uploaded_file($fileTmpLoc,"test_uploads/$fileName")){
echo"$fileNameuploadiscomplete";
}else{
echo"move_uploaded_filefunctionfailed";
}
?>
以上就是本文的全部内容，希望对大家的学习有所帮助。