序言:相比传统的input+file提交表单上传图片,ajax无页面刷新上传图片极大地优化了用户的体验感,下面让我们一块来学习一下,赶紧点赞收藏吧。
上传页面
代码html
>
/>PHP+Ajax无刷新上传头像预览a{cursor:pointer;} body{background
: #fff none repeat scroll 00; color: #333; font: 12px/1.5"Microsoft YaHei","Helvetica Neue",Helvetica,STHeiTi,sans-serif;
background-position: left top; background-repeat: repeat; background-attachment: scroll;}
.clearfix:after{visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0} *
:first-child+html.clearfix{zoom:1} ul,li{list-style: none;padding:0;margin:0}
.avatar_uplpad_btn { background: url("images/avatar_uplpad_btn.png") no-repeat scroll
00; display: inline-block; height: 30px; width: 82px; }
.loading_bar{background: #f2f2f5 none repeat scroll 00;border-radius: 6px;display: inline-block;font-size
: 0;height: 10px;overflow: hidden;text-align: left;width: 250px;} .loading_barem{background
: #fa7d3c none repeat scroll 00;display: inline-block;height: 10px;vertical-align: top;}
>
href="javascript:void(0);"class="avatar_uplpad_btn"id="avatar_uplpad_btn">
="margin:30px 0 0">图片上传中...
发表评论:
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。