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下载
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Guide d'installation et de mise à niveau de PHP 8.4 pour Ubuntu et Debian
Dec 24, 2024 pm 04:42 PM
PHP 8.4 apporte plusieurs nouvelles fonctionnalités, améliorations de sécurité et de performances avec une bonne quantité de dépréciations et de suppressions de fonctionnalités. Ce guide explique comment installer PHP 8.4 ou mettre à niveau vers PHP 8.4 sur Ubuntu, Debian ou leurs dérivés. Bien qu'il soit possible de compiler PHP à partir des sources, son installation à partir d'un référentiel APT comme expliqué ci-dessous est souvent plus rapide et plus sécurisée car ces référentiels fourniront les dernières corrections de bogues et mises à jour de sécurité à l'avenir.
Comment configurer Visual Studio Code (VS Code) pour le développement PHP
Dec 20, 2024 am 11:31 AM
Visual Studio Code, également connu sous le nom de VS Code, est un éditeur de code source gratuit – ou environnement de développement intégré (IDE) – disponible pour tous les principaux systèmes d'exploitation. Avec une large collection d'extensions pour de nombreux langages de programmation, VS Code peut être c
Comment analysez-vous et traitez-vous HTML / XML dans PHP?
Feb 07, 2025 am 11:57 AM
Ce tutoriel montre comment traiter efficacement les documents XML à l'aide de PHP. XML (Language de balisage extensible) est un langage de balisage basé sur le texte polyvalent conçu à la fois pour la lisibilité humaine et l'analyse de la machine. Il est couramment utilisé pour le stockage de données et
7 fonctions PHP que je regrette de ne pas connaître auparavant
Nov 13, 2024 am 09:42 AM
Si vous êtes un développeur PHP expérimenté, vous aurez peut-être le sentiment d'y être déjà allé et de l'avoir déjà fait. Vous avez développé un nombre important d'applications, débogué des millions de lignes de code et peaufiné de nombreux scripts pour réaliser des opérations.
Expliquez les jetons Web JSON (JWT) et leur cas d'utilisation dans les API PHP.
Apr 05, 2025 am 12:04 AM
JWT est une norme ouverte basée sur JSON, utilisée pour transmettre en toute sécurité des informations entre les parties, principalement pour l'authentification de l'identité et l'échange d'informations. 1. JWT se compose de trois parties: en-tête, charge utile et signature. 2. Le principe de travail de JWT comprend trois étapes: la génération de JWT, la vérification de la charge utile JWT et l'analyse. 3. Lorsque vous utilisez JWT pour l'authentification en PHP, JWT peut être généré et vérifié, et les informations sur le rôle et l'autorisation des utilisateurs peuvent être incluses dans l'utilisation avancée. 4. Les erreurs courantes incluent une défaillance de vérification de signature, l'expiration des jetons et la charge utile surdimensionnée. Les compétences de débogage incluent l'utilisation des outils de débogage et de l'exploitation forestière. 5. L'optimisation des performances et les meilleures pratiques incluent l'utilisation des algorithmes de signature appropriés, la définition des périodes de validité raisonnablement,
Programme PHP pour compter les voyelles dans une chaîne
Feb 07, 2025 pm 12:12 PM
Une chaîne est une séquence de caractères, y compris des lettres, des nombres et des symboles. Ce tutoriel apprendra à calculer le nombre de voyelles dans une chaîne donnée en PHP en utilisant différentes méthodes. Les voyelles en anglais sont a, e, i, o, u, et elles peuvent être en majuscules ou en minuscules. Qu'est-ce qu'une voyelle? Les voyelles sont des caractères alphabétiques qui représentent une prononciation spécifique. Il y a cinq voyelles en anglais, y compris les majuscules et les minuscules: a, e, i, o, u Exemple 1 Entrée: String = "TutorialSpoint" Sortie: 6 expliquer Les voyelles dans la chaîne "TutorialSpoint" sont u, o, i, a, o, i. Il y a 6 yuans au total
Expliquez la liaison statique tardive en PHP (statique: :).
Apr 03, 2025 am 12:04 AM
Liaison statique (statique: :) implémente la liaison statique tardive (LSB) dans PHP, permettant à des classes d'appel d'être référencées dans des contextes statiques plutôt que de définir des classes. 1) Le processus d'analyse est effectué au moment de l'exécution, 2) Recherchez la classe d'appel dans la relation de succession, 3) il peut apporter des frais généraux de performance.
Quelles sont les méthodes PHP Magic (__construct, __ destruct, __ call, __get, __set, etc.) et fournir des cas d'utilisation?
Apr 03, 2025 am 12:03 AM
Quelles sont les méthodes magiques de PHP? Les méthodes magiques de PHP incluent: 1. \ _ \ _ Construct, utilisé pour initialiser les objets; 2. \ _ \ _ Destruct, utilisé pour nettoyer les ressources; 3. \ _ \ _ Appel, gérer les appels de méthode inexistants; 4. \ _ \ _ GET, Implémentez l'accès à l'attribut dynamique; 5. \ _ \ _ SET, Implémentez les paramètres d'attribut dynamique. Ces méthodes sont automatiquement appelées dans certaines situations, améliorant la flexibilité et l'efficacité du code.
