jquery ajax php 无刷新上传文件 带 遮罩 进度条 结果的哟
添加时间:2013-8-7 点击量:
在很多项目中都邑叫用户上传器材这些的，自从接触了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
无论对感情还是对生活，“只要甜不要苦”都是任性而孩子气的，因为我们也不完美，我们也会伤害人。正因为我们都不完美，也因为生活从不是事事如意，所以对这些“瑕疵”的收纳才让我们对生活、对他人的爱变得日益真实而具体。—— 汪冰《世界再亏欠你，也要敢于拥抱幸福》
在很多项目中都邑叫用户上传器材这些的，自从接触了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
无论对感情还是对生活，“只要甜不要苦”都是任性而孩子气的，因为我们也不完美，我们也会伤害人。正因为我们都不完美，也因为生活从不是事事如意，所以对这些“瑕疵”的收纳才让我们对生活、对他人的爱变得日益真实而具体。—— 汪冰《世界再亏欠你，也要敢于拥抱幸福》
