前端引入文件

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

Ajax进度条异步处理

<scripttype="text/javascript">$(function(){$("#myupload").ajaxForm({dataType:'json',beforeSend:function(){$(".progress").show();},uploadProgress:function(event,position,total,percentComplete){varpercentVal=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><spanclass='delimg'rel='"+data.pic+"'>删除</span>");$(".files").html("文件名:"+data.name+"<spanclass='delimg'rel='"+data.pic+"'>del</span>大小："+data.size);varimg="http://www.sandleft.com/test/input/upload/files/"+data.pic;$(".showimg").html("<imgsrc='"+img+"'>");alert("上传成功!");},error:function(){alert("图片上传失败");}});$(".progress").hide();});</script>

前端上传HTML

<divclass="uk-containeruk-container-center"><divclass="pk-system-messages"></div><h2class="uk-h3uk-text-center">文件上传</h2><divclass="pk-system-messages"></div><divclass="container-main"><h2>AjaxImageUploader</h2><p>Asimpletutorialtoexplainp_w_picpathuploadingusingjqueryajaxandphp</p><formid='myupload'action='new_upload.php'method='post'enctype='multipart/form-data'><labelfor="file">Filename:</label><inputtype="file"name="mypic"id="file"><br><inputtype="submit"name="upload"class="btnbtn-success"value="upload"></form><divclass="progress"><divclass="progress-barprogress-bar-successprogress-bar-striped"role="progressbar"aria-valuenow="45"aria-valuemin="0"aria-valuemax="100"><spanclass="sr-only">0%Complete</span></div></div><divclass="files"></div><divclass="showimg"></div></div></div>

PHP文件上传类

<?phpclassupload{protected$file_path="files";//当前files存储文件夹#protected$file_size=1024000;protected$file_size=5120000;//5M用户上传//检测文件是否为空publicfunctioncheck_file($get_file){if(empty($get_file)){$type="check_file";$arr=array('error'=>'empty_name','type'=>$type);echojson_encode($arr);exit();}returntrue;}//检测文件类型publicfunctioncheck_type($get_type){if(($get_type==".docx")||($get_type==".doc")){#$types=$get_type;}else{$type="check_type";$arr=array('error'=>'format','type'=>$type);echojson_encode($arr);exit();}returntrue;}//检测文件大小publicfunctioncheck_size($get_file){if($get_file!=""){if($get_file>$this->file_size){$arr=array('error'=>'large');echojson_encode($arr);exit();}}else{returnfalse;exit();}returntrue;}//文件保存publicfunctionsave_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{returnfalse;exit();}#return$pics;}}

PHP文件上传处理

<?phpinclude("upload.class.php");$up_obj=newupload();$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){echojson_encode($arr);/*执行上传完成逻辑.....*/}}}}

文件上传效果如图：