Maison > Article > interface Web > Explication détaillée des étapes d'utilisation du plug-in de téléchargement Web jQuery

Explication détaillée des étapes d'utilisation du plug-in de téléchargement Web jQuery

php中世界最好的语言original: 2018-04-26 11:33:271386parcourir

Cette fois, je vais vous apporter une explication détaillée des étapes d'utilisation du plug-in de téléchargement Web de jQuery. Quelles sont les précautions lors de l'utilisation du plug-in de téléchargement Web de jQuery. Voici des cas pratiques, prenons-en ? un regard.

Exemple de testCe qui suit est un exemple simple d'utilisation :
Ici, nous utilisons le script de test php fourni avec le package Uploadify comme traitement de téléchargement, nous installons donc ici wamp comme php Dans l'environnement de test, dans le répertoire racine du site PHP, décompressez le fichier Uploadify téléchargé ci-dessus et créez un répertoire de sauvegarde de téléchargement de fichiers Ici, nous créons des téléchargements comme répertoire de sauvegarde de fichiers dans le répertoire de décompression Uploadify. .

Créez le fichier uploadify_test.php et ajoutez le contenu suivant :

<html>
<head>
  <link href="uploadify-v2.1.4/uploadify.css" rel="stylesheet" type="text/css" /> 
  <script type="text/javascript" src="uploadify-v2.1.4/jquery-1.4.2.min.js" ></script> 
  <script type="text/javascript" src="uploadify-v2.1.4/swfobject.js" ></script> 
  <script type="text/javascript" src="uploadify-v2.1.4/jquery.uploadify.v2.1.4.min.js" ></script> 
  <style type="text/css">
    #custom-demo .uploadifyQueueItem {
     background-color: #FFFFFF;
     border: none;
     border-bottom: 1px solid #E5E5E5;
     font: 11px Verdana, Geneva, sans-serif;
     height: 50px;
     margin-top: 0;
     padding: 10px;
     width: 350px;
    }
    #custom-demo .uploadifyError {
     background-color: #FDE5DD !important;
     border: none !important;
     border-bottom: 1px solid #FBCBBC !important;
    }
    #custom-demo .uploadifyQueueItem .cancel {
     float: right;
    }
    #custom-demo .uploadifyQueue .completed {
     color: #C5C5C5;
    }
    #custom-demo .uploadifyProgress {
     background-color: #E5E5E5;
     margin-top: 10px;
     width: 100%;
    }
    #custom-demo .uploadifyProgressBar {
     background-color: #0099FF;
     height: 3px;
     width: 1px;
    }
    #custom-demo #custom-queue {
     border: 1px solid #E5E5E5;
     height: 213px;
     margin-bottom: 10px;
     width: 370px;
    }        
  </style>  
  <script type="text/javascript">
    $(function() {
    $('#custom_file_upload').uploadify({
       'uploader'    : 'uploadify-v2.1.4/uploadify.swf',
       'script'     : 'uploadify-v2.1.4/uploadify.php',
       'cancelImg'   : 'uploadify-v2.1.4/cancel.png',
       'folder'     : 'uploadify-v2.1.4/uploads',
       'multi'     : true,
       'auto'      : true,
       'fileExt'    : '*.jpg;*.gif;*.png;*.txt',
       'fileDesc'    : 'Image Files (.JPG, .GIF, .PNG)',
       'queueID'    : 'custom-queue',
       'queueSizeLimit' : 3,
       'simUploadLimit' : 3,
       'sizeLimit'  : 1024000,
       'removeCompleted': false,
       'onSelectOnce'  : function(event,data) {
         $('#status-message').text(data.filesSelected + ' files have been added to the queue.');
        },
       'onAllComplete' : function(event,data) {
         $('#status-message').text(data.filesUploaded + ' files uploaded, ' + data.errors + ' errors.');
        }
      });        
    });
  </script>
</head>
<body>
  <p id="custom-demo" class="demo">
     <h2>Custom Demo</h2>
    <p>Uploadify is fully customizable. Here is an implementation with multiple files, auto uploads, limited file types, limited queue size, and custom onSelectOnce and onAllComplete functions.</p>
    <p class="demo-box">
      <p id="status-message">Select some files to upload:</p>
      <p id="custom-queue"></p>
      <input id="custom_file_upload" type="file" name="Filedata" />    
    </p>
  </p>
</body>
</html>

Le plug-in Uploadify invite $("#id").uploadify n'est pas une fonction Raisons possibles pour l'erreur Puisque swfobject.js et jquery.uploadify.v2.1.4.min.js utilisent l'API jquery, ces deux fichiers doivent dépendre du fichier jquery-1.4.2.min.js.
Dans des circonstances normales, vous devez introduire les fichiers js suivants :

<script type="text/javascript" src="uploadify-v2.1.4/jquery-1.4.2.min.js" ></script> 
<script type="text/javascript" src="uploadify-v2.1.4/swfobject.js" ></script> 
<script type="text/javascript" src="uploadify-v2.1.4/jquery.uploadify.v2.1.4.min.js" ></script>

Il existe déjà un autre fichier jquery JS dans le projet, provoquant des conflits de fichiers. La position d'introduction d'un autre fichier jQuery est située derrière la position d'introduction des trois fichiers js ci-dessus. À ce stade, le fichier jquery JS existant est utilisé dans le projet, provoquant le chargement de jquery.uploadify.v2.1.4.min.js. . Cette erreur sera signalée lorsqu'aucune définition des fonctions liées à jquery n'est disponible dans le fichier.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Le plug-in Uploadify permet de télécharger par lots avec une barre de progression

Comment créer un lien de menu avec Bouton du plug-in jQuery EasyUI

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php jquery easyui JS function

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Le plug-in jQuery.Uploadify implémente la fonction de téléchargement d'images par lots avec barre de progressionArticle suivant：Le plug-in jQuery.Uploadify implémente la fonction de téléchargement d'images par lots avec barre de progression

Articles Liés

Voir plus