最近项目中要做一个带进度条的上传文件的功能，学习了Ajax，使用起来比较方便，将几个方法实现就行。

前端引入文件

链接rel='样式表href=' https://最大cdn。bootstrapcdn。com/bootstrap/3。3 .2/CSS/bootstrap。量滴CSS ' script src=' http 3360http://apps。bdimg。com/libs/jquery/2。1 .1/jquery。量滴js '/script script src=' http :3358 mal sup。github。com/jquery。形式。js '/脚本Ajax进度条异步处理

脚本类型=' text/JavaScript ' $(function(){ $(' # my upload ')).ajaxForm({ dataType:'json '，beforeSend:function(){ $(').进步")。show()；}，uploadProgress:function(事件、位置、总计、百分比完成){ var percentVal=完成百分比“%”；$('.进度条')。宽度（百分比完成"%");$('.进度条')。html(PercentVal)；$('.仅sr ).html(完成百分比“%”；}，success:function(data){ $(' .进步")。hide()；if(数据。错误==' empty _ name '){ alert('文件上传非法，上传失败！');exit()；};if(data.error=='large'){ alert('图片上传不能大于2M，上传失败！');exit()；};/* alert(数据。错误)；*/if(数据。错误==' format '){ alert('图片格式错误，上传失败');//alert(数据。类型)；exit()；};//alert('上传成功！');//文件。html('数据。名称'('数据。size ' k)span class=' delimg ' rel=' data。pic’)删除/span’)；$('.文件')。html(")文件名： "数据。name " span class=" delimg " rel=" data。pic"del/span大小：'数据。大小)；var img=' http://www .沙子留下了。com/test/input/upload/files/'数据。pic$('.显示img ').html(' img src=' img ' ')；警报('上传成功!');}，error:function(){ alert('图片上传失败');} });$('.进步")。hide()；});/script前端上传超文本标记语言

div class=' uk-container uk-container-center ' div class=' PK-system-messages '/div h1 class=' uk-H2 uk-text-center ' style=' margin-top :-100px；'文件上传/h1 div class=' PK-系统-消息'/div class='容器-主' h1 Ajax Image Uploader/h1 pA简单教程解释使用jquery ajax和服务器端编程语言（Professional Hypertext Preprocessor的缩写）上传图像/表单id='我的上传'操作=' new _ upload。' PHP '方法=“文件”文件名：/标签的=“post”enctype=“multipart/form-data”标签输入类型='file' name='mypic' id='file'br输入类型='submit' name='upload' class='文件上传类

？phpclass上传{受保护的$ file _ path=' files//当前文件存储文件夹#受保护的$ file _ size=1024000受保护的$ file _ size=5120000//5M用户上传//检测文件是否为空公共函数check _ file($ get _ file){ if(empty($ get _ file)){ $ type=' check _ file '；$arr=array('error'='empty_name '，' type '=$ type)；echo JSON _ encode($ arr)；exit()；}返回true} //检测文件类型公共函数check _ type($ get _ type){ if($ get _ type==' .docx' ) || ($get_type==' .doc '){ # $ type=$ get _ type；} else { $ type=' check _ type$arr=数组(“错误”=“格式”，“类型”=$ type)；echo JSON _ encode($ arr)；exit()；}返回true} //检测文件大小公共函数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()；}返回true} //文件保存公共函数save_file($file_type，$ file _ tmp _ name){ $ rand=rand(1000，9999)；$pics=日期(' YmdHis ').$兰特$ 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文件上传处理？phpinclude('上传。上课。PHP’)；$up_obj=新上传();$ get _ FIlename=$ _ FILES[' my pic '][' name ']；$ get _ FIlesize=$ _ FIles[' my pic '][' size ']；$ get _ TMpfiles=$ _ FILES[' my pic '][' TMP _ name ']；$ get _ fileType=strtr($ 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)；/* 执行上传完成逻辑.*/} } } }文件上传效果如图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。