jquery ajax php 无刷新上传文件 带 遮罩 进度条 效果的哟
在很多项目中都会叫用户上传东西这些的，自从接触了jquery 和ajax之后就不管做什么，首先都会想到这个，我这个人呢？是比较重视客户体验的，这次我这边负责的是后台板块，然后就有一块是要求用户上传照片的，当然就想到了无刷新上传了呀，一般的jquery+ajax的话传递给php的data我习惯用json，然后就不知道怎么怎么把$_FILES数组中的内容给php，我要用move_uploaded_file这个函数来吧$_FILES['file']['tmp_name']移动到我想要的位置，tmp_name是上传的临时路径了啦，具体参看手册，数组中有很多关于文件的记录的。查询了很多记录，要达到无刷新上传，那么有的解决方法是用生成frame来做得，找了很久很久，找到一个插件，jquery的，叫jquery.form，是个表单插件，有兴趣的同学可以上网查看，我这里只说我这个的实现而已，ok，上代码：1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5 <title>jQuery+php实现ajax文件上传</title>
6 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
7 <script type="text/javascript" src="jquery.form.js"></script>
8 <style type="text/css">
9 .opacity{
10 opacity:0.3;
11 filter:alpha(opacity=30);
12 background-color: black;
13 }
14 .mask{
15
16 position:fixed;
17 _position:absolute;
18 top:0;
19 left:0;
20 z-index:1000;
21 }
22 #main{
23 width:980px;
24 margin:0px auto;
25 text-align:center;
26 }
27 #loading{
28 background-color:white;
29 width:100px;
30 height:20px;
31 position:fixed;
32 _position:absolute;
33 text-align:center;
34 border-style:groove;
35 z-index:2000;
36 }
37 </style>
38 </head>
39
40 <body>
41 <div id="main">
42<div class="demo">
43 <div class="btn">
44 <span>添加附件</span>
45 <input id="fileupload" type="file" name="mypic">
46 </div>
47 <div id="zhezhao">
48 <div id="loading">
49 <span class="bar"><img src="loading.gif" /></span><span class="percent">0%</span >
50 </div>
51 </div>
52 <div id="showimg"></div>
53 </div>
54 </div>
55
56 <script type="text/javascript">
57 $(function () {
58 var percent = $('.percent');
59 var showimg = $('#showimg');
60 var zhezhao = $("#zhezhao");
61 var btn = $(".btn span");
62 zhezhao.hide();
63 $("#fileupload").wrap("<form id='myupload' action='action.php' method='post' enctype='multipart/form-data'></form>");
64 $("#fileupload").change(function(){
65 $("#myupload").ajaxSubmit({
66 dataType:'json',
67 beforeSend: function() {
68 showimg.empty();
69 zhezhao.show();
70 var percentVal = '0%';
71 percent.html(percentVal);
72 btn.html("上传中...");
73 },
74 uploadProgress: function(event, position, total, percentComplete) {
75 $("#zhezhao").attr("class","mask opacity");
76 $("#zhezhao").css('width',$(window).width());
77 $("#zhezhao").css('height',$(window).height());
78 var percentVal = percentComplete + '%';
79 percent.html(percentVal);
80 $("#loading").css('margin-left',$(window).width()/2-50);
81 $("#loading").css('margin-top',$(window).height()/2-10);
82 },
83 success: function(data) {
84 var img = "files/"+data.pic;
85 zhezhao.hide();
86 showimg.html("<img src='"+img+"'>");
87 btn.html("添加附件");
88 },
89 error:function(xhr){
90 btn.html("上传失败");
91 }
92 });
93 });
94 });
95 </script>
96
97 </body>
98 </html>
响应页面action.php中只是简单的处理上传，然后以json数据的形式返回，供前台显示
1 <?php
2
3 $picname = $_FILES['mypic']['name'];
4 $picsize = $_FILES['mypic']['size'];
5 if ($picname != "") {
6 if ($picsize > 1024000) {
7 echo '图片大小不能超过1M';
8 exit;
9 }
10 $type = strstr($picname, '.');
11 if ($type != ".gif" && $type != ".jpg") {
12 echo '图片格式不对！';
13 exit;
14 }
15 $rand = rand(100, 999);
16 $pics = date("YmdHis") . $rand . $type;
17 //上传路径
18 $pic_path = "files/". $pics;
19 move_uploaded_file($_FILES['mypic']['tmp_name'], $pic_path);
20 }
21 $size = round($picsize/1024,2);
22 $arr = array(
23 'name'=>$picname,
24 'pic'=>$pics,
25 'size'=>$size
26 );
27 echo json_encode($arr);
28 ?>
然后就完成啦。
好像还有jquery.form还没有给大家，这里就不说了，我网盘有写好的demo，需要的同学可以下载看。
jquery+ajax（php）无刷新上传文件带进度demo下载
页:
[1]