jqueryajaxphp无刷新上传文件带遮罩进度条效果的哟_PHP教程

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了jqueryajaxphp无刷新上传文件带遮罩进度条效果的哟_PHP教程，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7496字，纯文字阅读大概需要11分钟。

内容图文

<span  1 <span <span DOCTYPE HTML
<span  2 <span <<span html
<span  3 <span <<span head
<span  4 <span <<span meta <span http-equiv<span ="Content-Type"<span  content<span ="text/html; charset=UTF-8"
<span  5 <span <<span titlejQuery+php实现ajax文件上传<span </<span title
<span  6 <span <<span script <span type<span ="text/javascript"<span  src<span ="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"</<span script
<span  7 <span <<span script <span type<span ="text/javascript"<span  src<span ="jquery.form.js"</<span script
<span  8 <span <<span style <span type<span ="text/css"
<span  9 <span     .opacity<span {
<span 10 <span         opacity<span :<span 0.3<span ;
<span 11 <span         filter<span :<span alpha(opacity=30)<span ;
<span 12 <span         background-color<span :<span  black<span ;
<span 13     <span }
<span 14 <span     .mask<span {
<span 15         
<span 16 <span         position<span :<span fixed<span ;
<span 17 <span         _position<span :<span absolute<span ;
<span 18 <span         top<span :<span 0<span ;
<span 19 <span         left<span :<span 0<span ;
<span 20 <span         z-index<span :<span 1000<span ;
<span 21     <span }
<span 22 <span     #main<span {
<span 23 <span         width<span :<span 980px<span ;
<span 24 <span         margin<span :<span 0px auto<span ;
<span 25 <span         text-align<span :<span center<span ;
<span 26     <span }
<span 27 <span     #loading<span {
<span 28 <span         background-color<span :<span white<span ;
<span 29 <span         width<span :<span 100px<span ;
<span 30 <span         height<span :<span 20px<span ;
<span 31 <span         position<span :<span fixed<span ;
<span 32 <span         _position<span :<span absolute<span ;
<span 33 <span         text-align<span :<span center<span ;
<span 34 <span         border-style<span :<span groove<span ;
<span 35 <span         z-index<span :<span 2000<span ;
<span 36     <span }
<span 37 <span </<span style
<span 38 <span </<span head
<span 39 
<span 40 <span <<span body
<span 41 <span <<span div <span id<span ="main"
<span 42  <span <<span div <span class<span ="demo"
<span 43            <span <<span div <span class<span ="btn"
<span 44             <span <<span span添加附件<span </<span span
<span 45             <span <<span input <span id<span ="fileupload"<span  type<span ="file"<span  name<span ="mypic"
<span 46         <span </<span div
<span 47         <span <<span div <span id<span ="zhezhao"
<span 48         <span <<span div <span id<span ="loading"
<span 49             <span <<span span <span class<span ="bar"<<span img <span src<span ="loading.gif" </<span span<<span span <span class<span ="percent"0%<span </<span span 
<span 50             <span </<span div
<span 51         <span </<span div
<span 52         <span <<span div <span id<span ="showimg"</<span div
<span 53    <span </<span div
<span 54 <span </<span div
<span 55 
<span 56 <span <<span script <span type<span ="text/javascript"
<span 57 <span $(<span function<span  () {
<span 58     <span var<span  percent <span =<span  $(<span '<span .percent<span '<span );
<span 59     <span var<span  showimg <span =<span  $(<span '<span #showimg<span '<span );
<span 60     <span var<span  zhezhao <span =<span  $(<span "<span #zhezhao<span "<span );
<span 61     <span var<span  btn <span =<span  $(<span "<span .btn span<span "<span );
<span 62 <span     zhezhao.hide();
<span 63 <span     $(<span "<span #fileupload<span "<span ).wrap(<span "<span <span "<span );
<span 64 <span     $(<span "<span #fileupload<span "<span ).change(<span function<span (){
<span 65 <span         $(<span "<span #myupload<span "<span ).ajaxSubmit({
<span 66 <span             dataType:  <span '<span json<span '<span ,
<span 67 <span             beforeSend: <span function<span () {
<span 68 <span                 showimg.empty();
<span 69 <span                 zhezhao.show();
<span 70                 <span var<span  percentVal <span = <span '<span 0%<span '<span ;
<span 71 <span                 percent.html(percentVal);
<span 72 <span                 btn.html(<span "<span 上传中...<span "<span );
<span 73 <span             },
<span 74 <span             uploadProgress: <span function<span (event, position, total, percentComplete) {
<span 75 <span                 $(<span "<span #zhezhao<span "<span ).attr(<span "<span class<span "<span ,<span "<span mask opacity<span "<span );
<span 76 <span                 $(<span "<span #zhezhao<span "<span ).css(<span '<span width<span '<span ,$(window).width());
<span 77 <span                 $(<span "<span #zhezhao<span "<span ).css(<span '<span height<span '<span ,$(window).height());
<span 78                 <span var<span  percentVal <span =<span  percentComplete <span + <span '<span %<span '<span ;
<span 79 <span                 percent.html(percentVal);
<span 80 <span                 $(<span "<span #loading<span "<span ).css(<span '<span margin-left<span '<span ,$(window).width()<span /<span 2-50);
<span 81 <span                 $(<span "<span #loading<span "<span ).css(<span '<span margin-top<span '<span ,$(window).height()<span /<span 2-10);
<span 82 <span             },
<span 83 <span             success: <span function<span (data) {
<span 84                 <span var<span  img <span = <span "<span files/<span "<span +<span data.pic;
<span 85 <span                 zhezhao.hide();
<span 86 <span                 showimg.html(<span "<span <span "<span );
<span 87 <span                 btn.html(<span "<span 添加附件<span "<span );
<span 88 <span             },
<span 89 <span             error:<span function<span (xhr){
<span 90 <span                 btn.html(<span "<span 上传失败<span "<span );
<span 91 <span             }
<span 92 <span         });
<span 93 <span     });
<span 94 <span });
<span 95 <span </<span script
<span 96 
<span 97 <span </<span body
<span 98 <span </<span html

响应页面action.php中只是简单的处理上传，然后以json数据的形式返回，供前台显示

<span  1  
      = ['mypic']['name'      = ['mypic']['size'      ( != ""          ( > 1024000              '图片大小不能超过1M'                        = (, '.'          ( != ".gif" &&  != ".jpg"              '图片格式不对！'                        = (100, 999          = ("YmdHis") .  .          
          = "files/".          (['mypic']['tmp_name'],        = (/1024,2      =          'name'=>,
         'pic'=>,
         'size'=>
       json_encode( ?>

然后就完成啦。

好像还有jquery.form还没有给大家，这里就不说了，我网盘有写好的demo，需要的同学可以下载看。

jquery+ajax（php）无刷新上传文件带进度demo下载

http://www.bkjia.com/PHPjc/440214.htmlwww.bkjia.comtruehttp://www.bkjia.com/PHPjc/440214.htmlTechArticle在很多项目中都会叫用户上传东西这些的，自从接触了jquery 和ajax之后就不管做什么，首先都会想到这个，我这个人呢？是比较重视客户体...

内容总结

以上是互联网集市为您收集整理的jqueryajaxphp无刷新上传文件带遮罩进度条效果的哟_PHP教程全部内容，希望文章能够帮你解决jqueryajaxphp无刷新上传文件带遮罩进度条效果的哟_PHP教程所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端