1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 6 <title>Examples</title> 7 <meta name="description" content=""> 8 <meta name="keywords" content=""> 9 <link href="" rel="stylesheet"> 10 <style> 11 #outer{ 12 width: 300px; 13 height: 30px; 14 border: 1px solid red; 15 position: relative; 16 text-align: center; 17 } 18 #jdt{ 19 height: 30px; 20 position: absolute; 21 z-index: -100; 22 } 23 </style> 24 </head> 25 <body> 26 <div id="outer"> 27 <div id="jdt"></div> 28 </div> 29 <form id="main"> 30 選擇文件 : <input type="file" name="file"><br /> 31 <input type="button" value="上傳" onclick="upLoadfile()"> 32 </form> 33 <script> 34 function upLoadfile() { 35 var fm=document.getElementById('main');//1. 獲取表單對象 36 var fd=new FormData(fm);//2. 實例化FormData對象 37 var xhr =new XMLHttpRequest();//3. 實例化XMLHttpRequest對象 38 xhr.open('post','upfile.php');//4. 調用open方法，准備ajax請求 39 var jdt=document.getElementById('jdt');//獲取進度條對象 40 var outer=document.getElementById('outer'); 41 xhr.upload.onprogress = function(a) {//參數a是事件，onprogress事件獲取到的數據全部保存到a當中 42 //計算每100ms文件上傳的程度占總體的百分比,取兩位小數 43 var percent = parseInt((a.loaded/a.total)*100); 44 //總體長度300px,計算當前進度條長度 46 var len = percent * 300 /100; 47 //設定進度條寬 50 outer.innerHTML ="<div id='jdt' style='width:"+len+"px;background:skyblue;'></div>"+ percent + '%'; 51 } 52 xhr.send(fd);//5. 調用send方法，發送ajax請求 53 xhr.onreadystatechange=function () {//6. 調用onreadystatechange事件接收結果 54 if (xhr.readyState == 4) { 55 if (xhr.responseText == 1) { 56 alert('文件上傳成功'); 57 } else { 58 alert('文件上傳失敗'); 59 } 60 } 61 } 62 } 63 </script> 64 </body> 65 </html>
================================================HTML代碼=============================================
1 <?php 2 /** 3 * 4 * @authors Your Name (you@example.org) 5 * @date 2017-10-29 16:42:50 6 * @version $Id$ 7 */ 8 header("content-type:text/html;charset=utf-8"); 9 if($_FILES['file']['error'] == 0){//獲取文件error屬性值,為0時表示文件上傳成功 10 $ext=strrchr($_FILES['file']['name'],'.');//獲取文件擴展名 11 $name=time().'_'.rand(1000,9999).$ext;//隨機文件名防止文件重名 12 if(move_uploaded_file($_FILES['file']['tmp_name'],$name)){ 13 echo 1; 14 }else{ 15 echo 2; 16 } 17 }else{ 18 echo 2; 19 }
=======================================================PHP代碼=========================================================
需要修改虛擬主機配置文件中的POST默認上傳文件大小與文件上傳大小的限制(盡量前者比后者稍大,避免文件大小和表單大小一致時表單數據無法上傳)