jquery ajax php 无刷新上传文件 带 遮罩 进度条 效果的哟
Jun 13, 2016 am 11:30 AM
ajaxjqueryphpuploadrefreshexistbringEffectdocumentuseofscheduleMask
在很多项目中都会叫用户上传东西这些的，自从接触了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下载
Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
jquery实现多少秒后隐藏图片Apr 20, 2022 pm 05:33 PM实现方法：1、用“$("img").delay(毫秒数).fadeOut()”语句，delay()设置延迟秒数；2、用“setTimeout(function(){ $("img").hide(); },毫秒值);”语句，通过定时器来延迟。
jquery怎么修改min-height样式Apr 20, 2022 pm 12:19 PM修改方法：1、用css()设置新样式，语法“$(元素).css("min-height","新值")”；2、用attr()，通过设置style属性来添加新样式，语法“$(元素).attr("style","min-height:新值")”。
axios与jquery的区别是什么Apr 20, 2022 pm 06:18 PM区别：1、axios是一个异步请求框架，用于封装底层的XMLHttpRequest，而jquery是一个JavaScript库，只是顺便封装了dom操作；2、axios是基于承诺对象的，可以用承诺对象中的方法，而jquery不基于承诺对象。
jquery怎么在body中增加元素Apr 22, 2022 am 11:13 AM增加元素的方法：1、用append()，语法“$("body").append(新元素)”，可向body内部的末尾处增加元素；2、用prepend()，语法“$("body").prepend(新元素)”，可向body内部的开始处增加元素。
jquery中apply()方法怎么用Apr 24, 2022 pm 05:35 PM在jquery中，apply()方法用于改变this指向，使用另一个对象替换当前对象，是应用某一对象的一个方法，语法为“apply(thisobj,[argarray])”；参数argarray表示的是以数组的形式进行传递。
jquery怎么删除div内所有子元素Apr 21, 2022 pm 07:08 PM删除方法：1、用empty()，语法“$("div").empty();”，可删除所有子节点和内容；2、用children()和remove()，语法“$("div").children().remove();”，只删除子元素，不删除内容。
jquery怎么去掉只读属性Apr 20, 2022 pm 07:55 PM去掉方法：1、用“$(selector).removeAttr("readonly")”语句删除readonly属性；2、用“$(selector).attr("readonly",false)”将readonly属性的值设置为false。
jquery on()有几个参数Apr 21, 2022 am 11:29 AMon()方法有4个参数：1、第一个参数不可省略，规定要从被选元素添加的一个或多个事件或命名空间；2、第二个参数可省略，规定元素的事件处理程序；3、第三个参数可省略，规定传递到函数的额外数据；4、第四个参数可省略，规定当事件发生时运行的函数。
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
How Long Does It Take To Beat Split Fiction?
3 weeks agoByDDD
R.E.P.O. Save File Location: Where Is It & How to Protect It?
3 weeks agoByDDD
Hot Tools
PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool
SublimeText3 Mac version
God-level code editing software (SublimeText3)
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
Notepad++7.3.1
Easy-to-use and free code editor
Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.
