本实例是关于php文件上传时进度条的实现,主要采用ajax技术,另外还运用了html5,有需要的朋友可以研究一下。
本实例有两个文件:
upload_form.html:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
<!DOCTYPE html>
< html >
< head >
< script >
function _(el){
return document.getElementById(el);
}
function uploadFile(){
var file = _("file1").files[0];
// alert(file.name+" | "+file.size+" | "+file.type);
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", "file_upload_parser.php");
ajax.send(formdata);
}
function progressHandler(event){
_("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
var percent = (event.loaded / event.total) * 100;
_("progressBar").value = Math.round(percent);
_("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
}
function completeHandler(event){
_("status").innerHTML = event.target.responseText;
_("progressBar").value = 0;
}
function errorHandler(event){
_("status").innerHTML = "Upload Failed";
}
function abortHandler(event){
_("status").innerHTML = "Upload Aborted";
}
</ script >
</ head >
< body >
< h2 >HTML5 File Upload Progress Bar Tutorial</ h2 >
< form id = "upload_form" enctype = "multipart/form-data" method = "post" >
< input type = "file" name = "file1" id = "file1" >< br >
< input type = "button" value = "Upload File" onclick = "uploadFile()" >
< progress id = "progressBar" value = "0" max = "100" style = "width:300px;" ></ progress >
< h3 id = "status" ></ h3 >
< p id = "loaded_n_total" ></ p >
</ form >
</ body >
</ html >
|
file_upload_parser.php:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<?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 , "test_uploads/$fileName" )){
echo "$fileName upload is complete" ;
} else {
echo "move_uploaded_file function failed" ;
}
?>
|
以上就是本文的全部内容,希望对大家的学习有所帮助。