jquery ajax php 无刷新上传文件带遮罩进度条效果的哟-php手册-php.cn

ホームページ

php教程

php手册

jquery ajax php 无刷新上传文件带遮罩进度条效果的哟

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 13, 2016 am 11:30 AM

ajax jquery 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下载

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7517

CakePHP チュートリアル

1378

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

Ubuntu および Debian 用の PHP 8.4 インストールおよびアップグレードガイド Dec 24, 2024 pm 04:42 PM

PHP 8.4 では、いくつかの新機能、セキュリティの改善、パフォーマンスの改善が行われ、かなりの量の機能の非推奨と削除が行われています。このガイドでは、Ubuntu、Debian、またはその派生版に PHP 8.4 をインストールする方法、または PHP 8.4 にアップグレードする方法について説明します。

PHP 開発用に Visual Studio Code (VS Code) をセットアップする方法 Dec 20, 2024 am 11:31 AM

Visual Studio Code (VS Code とも呼ばれる) は、すべての主要なオペレーティングシステムで利用できる無料のソースコードエディター (統合開発環境 (IDE)) です。多くのプログラミング言語の拡張機能の大規模なコレクションを備えた VS Code は、

PHPでHTML/XMLを解析および処理するにはどうすればよいですか？ Feb 07, 2025 am 11:57 AM

このチュートリアルでは、PHPを使用してXMLドキュメントを効率的に処理する方法を示しています。 XML（拡張可能なマークアップ言語）は、人間の読みやすさとマシン解析の両方に合わせて設計された多用途のテキストベースのマークアップ言語です。一般的にデータストレージに使用されます

今まで知らなかったことを後悔している 7 つの PHP 関数 Nov 13, 2024 am 09:42 AM

あなたが経験豊富な PHP 開発者であれば、すでにそこにいて、すでにそれを行っていると感じているかもしれません。あなたは、運用を達成するために、かなりの数のアプリケーションを開発し、数百万行のコードをデバッグし、大量のスクリプトを微調整してきました。

JSON Web Tokens（JWT）とPHP APIでのユースケースを説明してください。 Apr 05, 2025 am 12:04 AM

JWTは、JSONに基づくオープン標準であり、主にアイデンティティ認証と情報交換のために、当事者間で情報を安全に送信するために使用されます。 1。JWTは、ヘッダー、ペイロード、署名の3つの部分で構成されています。 2。JWTの実用的な原則には、JWTの生成、JWTの検証、ペイロードの解析という3つのステップが含まれます。 3. PHPでの認証にJWTを使用する場合、JWTを生成および検証でき、ユーザーの役割と許可情報を高度な使用に含めることができます。 4.一般的なエラーには、署名検証障害、トークンの有効期限、およびペイロードが大きくなります。デバッグスキルには、デバッグツールの使用とロギングが含まれます。 5.パフォーマンスの最適化とベストプラクティスには、適切な署名アルゴリズムの使用、有効期間を合理的に設定することが含まれます。

母音を文字列にカウントするPHPプログラム Feb 07, 2025 pm 12:12 PM

文字列は、文字、数字、シンボルを含む一連の文字です。このチュートリアルでは、さまざまな方法を使用してPHPの特定の文字列内の母音の数を計算する方法を学びます。英語の母音は、a、e、i、o、u、そしてそれらは大文字または小文字である可能性があります。母音とは何ですか？母音は、特定の発音を表すアルファベットのある文字です。大文字と小文字など、英語には5つの母音があります。 a、e、i、o、u 例1 入力：string = "tutorialspoint" 出力：6 説明する文字列「TutorialSpoint」の母音は、u、o、i、a、o、iです。合計で6元があります

PHPでの後期静的結合を説明します（静的：:)。 Apr 03, 2025 am 12:04 AM

静的結合（静的：:) PHPで後期静的結合（LSB）を実装し、クラスを定義するのではなく、静的コンテキストで呼び出しクラスを参照できるようにします。 1）解析プロセスは実行時に実行されます。2）継承関係のコールクラスを検索します。3）パフォーマンスオーバーヘッドをもたらす可能性があります。

PHPマジックメソッド（__construct、__destruct、__call、__get、__setなど）とは何ですか？ Apr 03, 2025 am 12:03 AM

PHPの魔法の方法は何ですか？ PHPの魔法の方法には次のものが含まれます。1。\ _ \ _コンストラクト、オブジェクトの初期化に使用されます。 2。\ _ \ _リソースのクリーンアップに使用される破壊。 3。\ _ \ _呼び出し、存在しないメソッド呼び出しを処理します。 4。\ _ \ _ get、dynamic属性アクセスを実装します。 5。\ _ \ _セット、動的属性設定を実装します。これらの方法は、特定の状況で自動的に呼び出され、コードの柔軟性と効率を向上させます。

See all articles

jquery ajax php 无刷新上传文件 带 遮罩 进度条 效果的哟