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=" 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 文件已存在！"; }
运行结果：
