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，上代码：

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

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

<span  1</span> <?<span php
</span><span  2</span> 
<span  3</span>     <span $picname</span> = <span $_FILES</span>['mypic']['name'<span ];
</span><span  4</span>     <span $picsize</span> = <span $_FILES</span>['mypic']['size'<span ];
</span><span  5</span>     <span if</span> (<span $picname</span> != ""<span ) {
</span><span  6</span>         <span if</span> (<span $picsize</span> > 1024000<span ) {
</span><span  7</span>             <span echo</span> '图片大小不能超过1M'<span ;
</span><span  8</span>             <span exit</span><span ;
</span><span  9</span> <span         }
</span><span 10</span>         <span $type</span> = <span strstr</span>(<span $picname</span>, '.'<span );
</span><span 11</span>         <span if</span> (<span $type</span> != ".gif" && <span $type</span> != ".jpg"<span ) {
</span><span 12</span>             <span echo</span> '图片格式不对！'<span ;
</span><span 13</span>             <span exit</span><span ;
</span><span 14</span> <span         }
</span><span 15</span>         <span $rand</span> = <span rand</span>(100, 999<span );
</span><span 16</span>         <span $pics</span> = <span date</span>("YmdHis") . <span $rand</span> . <span $type</span><span ;
</span><span 17</span>         <span //</span><span 上传路径</span>
<span 18</span>         <span $pic_path</span> = "files/". <span $pics</span><span ;
</span><span 19</span>         <span move_uploaded_file</span>(<span $_FILES</span>['mypic']['tmp_name'], <span $pic_path</span><span );
</span><span 20</span> <span     }
</span><span 21</span>     <span $size</span> = <span round</span>(<span $picsize</span>/1024,2<span );
</span><span 22</span>     <span $arr</span> = <span array</span><span (
</span><span 23</span>         'name'=><span $picname</span>,
<span 24</span>         'pic'=><span $pics</span>,
<span 25</span>         'size'=><span $size</span>
<span 26</span> <span     );
</span><span 27</span>     <span echo</span> json_encode(<span $arr</span><span );
</span><span 28</span> ?>

然后就完成啦。

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

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