PHP+Ajax异步带进度条上传文件

前端引入文件

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://malsup.github.com/jquery.form.js"></script>

Ajax进度条异步处理

<script type="text/javascript"> $(function () {       $("#myupload").ajaxForm({           dataType:'json',           beforeSend:function(){                    $(".progress").show();           },           uploadProgress:function(event,position,total,percentComplete){                   var percentVal = percentComplete + '%';                   $(".progress-bar").width(percentComplete + '%');                   $(".progress-bar").html(percentVal);                   $(".sr-only").html(percentComplete + '%');           },           success:function(data){                   $(".progress").hide();                              if(data.error == "empty_name"){                           alert("文件上传非法,上传失败!");                           exit();                   };                   if(data.error == "large"){                           alert("图片上传不能大于2M,上传失败!");                           exit();                   };      /*alert(data.error);*/                   if(data.error == "format"){                           alert("图片格式错误,上传失败");                           //alert(data.type);                           exit();                   };                      //alert("上传成功!");                   //files.html("<b>"+data.name+"("+data.size+"k)</b> <span class='delimg' rel='"+data.pic+"'>删除</span>");                   $(".files").html("文件名: "+data.name+"<span class='delimg' rel='"+data.pic+"'>   del   </span>大小："+data.size);                   var img = "http://www.sandleft.com/test/input/upload/files/"+data.pic;                   $(".showimg").html("<img src='"+img+"'>");                   alert("上传成功!");           },           error:function(){                   alert("图片上传失败");           }                  });       $(".progress").hide(); }); </script>

前端上传HTML

 <div class="uk-container uk-container-center">                 <div class="pk-system-messages"></div>	<h2 class="uk-h3 uk-text-center" >文件上传</h2>	<div class="pk-system-messages"></div>	 <div class="container-main">          	 <h2>Ajax Image Uploader</h2>          	 <p>A simple tutorial to explain p_w_picpath uploading using jquery ajax and php</p>              	<form id='myupload' action='new_upload.php' method='post' enctype='multipart/form-data'>           	  <label for="file">Filename:</label>          	  <input type="file" name="mypic" id="file"><br>          	  <input type="submit" name="upload" class="btn btn-success" value="upload">          	    </form>              	     <div class="progress">           	       <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" >	<span class="sr-only">0% Complete</span>          	       </div>         	     </div>	<div class="files"></div>	<div class="showimg"></div>                  </div>	 	 </div>

PHP文件上传类

<?php class upload{	protected $file_path = "files"; //当前files存储文件夹	#protected $file_size = 1024000;	protected $file_size = 5120000; //5M 用户上传	//检测文件是否为空  public function check_file($get_file)  {	   if (empty($get_file))	   {	     $type = "check_file";              $arr = array('error'=>'empty_name','type'=>$type);              echo json_encode($arr);              exit();         }	return true; }  //检测文件类型  public function check_type($get_type)  {	  if (( $get_type == ".docx" ) || ( $get_type == ".doc" )) {	       #$types = $get_type;	  }else{	       $type = "check_type";	       $arr = array('error'=>'format','type'=>$type);                echo json_encode($arr);                exit();      }    return true;  }  //检测文件大小  public function check_size($get_file)  {	 if ( $get_file != "" ) {             if ( $get_file > $this->file_size ) {                    $arr = array('error'=>'large');                    echo json_encode($arr);                    exit();             }     }else{	return false;	exit();	}   return true;  }     //文件保存  public function save_file($file_type,$file_tmp_name)  {	$rand = rand(1000, 9999);	$pics = date("YmdHis") . $rand . $file_type;	$path = $this->file_path."/".$pics;	$result = move_uploaded_file($file_tmp_name, $path);	if($result){	return $pics;	}else{	return false;	exit();	}	#return $pics;  }   }

PHP文件上传处理

<?php include("upload.class.php"); $up_obj = new upload();   $get_fileName = $_FILES['mypic']['name']; $get_fileSize = $_FILES['mypic']['size']; $get_TmpFiles = $_FILES['mypic']['tmp_name']; $get_fileType = strstr($get_fileName, '.'); $check_result = $up_obj->check_file($get_fileName); if($check_result){     //检查文件类型	$result_type = $up_obj->check_type($get_fileType);	//检查文件大小	if($result_type){	$result_size = $up_obj->check_size($get_fileSize);	if($result_size){	//文件上传保存	$pics = $up_obj->save_file($get_fileType,$get_TmpFiles);	$size = round($get_fileSize/1024,2);  	                $arr = array(  	                'name' => $get_fileName,	                 'pic' => $pics,	                 'size'=> $size,	                 'error' => 2	         );	 //检查文件上传状态	 if($pics){	         echo json_encode($arr);	 /*	 执行上传完成逻辑.....	 */	}	}     } }

文件上传效果如图：