html代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> New Document </title>
<meta name="Generator" content="NPP-Plugin">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript">
window.onload = function(){
var f =document.getElementsByTagName('form')[0];
f.onsubmit = function(evt){
var fd = new FormData(this);
var xhr = new XMLHttpRequest();
var jdt_border = document.getElementById('jdt_border');
var jdt_per = document.getElementById('jdt_per');
var jdt_text = jdt_per.childNodes;
xhr.upload.onprogress = function(evt){
//console.log(evt);
var loaded = evt.loaded;
var total = evt.total;
var percent = Math.floor((loaded/total)*100);
//document.getElementById('perout').innerHTML = "已完成:"+percent+"%";
jdt_border.style.display = 'block';
jdt_per.style.width = percent+'%';
jdt_text[0].innerHTML = "已完成:"+percent+"%";
}
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
//alert(xhr.responseText);
//console.log(xhr);
//document.getElementById('perout').innerHTML = xhr.responseText;
jdt_text[0].innerHTML = xhr.responseText;
}
}
xhr.open("post","./01.php");
xhr.send(fd);
evt.preventDefault();
}
}
</script>
<style type="text/css">
.m {width:1000px;margin:0 auto;font-size: 12px;}
.Bar ,.Bars { position: relative; width: 200px; border: 1px solid #B1D632; padding: 1px; }
.Bar div,.Bars div { display: block; position: relative;background:#00F; color: #333333;height: 20px; line-height: 20px;}
.Bars div{ background:#090}
.Bar div span,.Bars div span { position: absolute; width: 200px; text-align: center; font-weight: bold; }
.cent{ width:300px; overflow:hidden;display:none;}
</style>
</head>
<body>
<div class="m">
<h2>附件上传</h2>
<form action="./01.php">
<p><input type="file" name="pic"/></p>
<p><input type="submit" value="提交" /></p>
</form>
<div id="perout" style="display:none;"></div>
<div id="jdt_border" class="cent">
<p>
<div class="Bars">
<div id="jdt_per" style="width: 0%;"><span></span></div>
</div>
</p>
</div>
</div>
</body>
</html>
php代码:
<?php
ini_set("display_errors", "Off");
error_reporting(E_ALL^E_NOTICE^E_WARNING);
//print_r($_FILES);
/*
define("MAX_SIZE", 51200);
if($_FILES['pic']['size']>MAX_SIZE){
die("文件不能大于".(MAX_SIZE/1024)."mb!");
}*/
if($_FILES['pic']['error']>0){
die("文件格式错误!");
}
$path = "./upload/";
$name = time().$_FILES['pic']['name'];
$newPath = $path.$name;
if(!file_exists($newPath)){
if(move_uploaded_file($_FILES['pic']['tmp_name'],iconv("UTF-8","GBK",$newPath))){
echo "upload success!";
}else{
echo "upload fail!";
}
}else{
echo "$newPath 文件已存在!";
}
运行结果: