在很多项目中都会叫用户上传东西这些的，自从接触了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 @@##@@<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下载
立即学习“PHP免费学习笔记（深入）”；
PHP怎么学习？PHP怎么入门？PHP在哪学？PHP怎么学才快？不用担心，这里为大家提供了PHP速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
150
收藏
