Ausführliche Erläuterung der Schritte zur Verwendung des jQuery-Web-Upload-Plug-Ins-js-Tutorial-php.cn

Ausführliche Erläuterung der Schritte zur Verwendung des jQuery-Web-Upload-Plug-Ins

php中世界最好的语言

Freigeben： 2018-04-26 11:33:27

Original

1384 Leute haben es durchsucht

Dieses Mal werde ich Ihnen die Schritte zur Verwendung des Web-Upload-Plug-Ins von jQuery ausführlich erläutern. Was sind die Vorsichtsmaßnahmen bei der Verwendung des Web-Upload-Plug-Ins von jQuery? ein Blick.

TestbeispielDas Folgende ist ein einfaches Anwendungsbeispiel:
Hier verwenden wir das PHP-Testskript, das mit dem Uploadify-Paket als Upload-Verarbeitung geliefert wird, also installieren wir hier wamp als php Dekomprimieren Sie in der Testumgebung im Stammverzeichnis der PHP-Website die oben heruntergeladene Uploadify-Datei und erstellen Sie ein Datei-Upload -Speicherverzeichnis. Hier erstellen wir Uploads als Dateispeicherverzeichnis im Uploadify-Dekomprimierungsverzeichnis . .

Erstellen Sie die Datei „uploadify_test.php“ und fügen Sie den folgenden Inhalt hinzu:

<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>

Nach dem Login kopieren

Uploadify-Plug-in-Eingabeaufforderungen $("#id").uploadify ist keine Funktion. Mögliche Gründe dafür Fehlerswfobject. Da js und jquery.uploadify.v2.1.4.min.js die jquery-API verwenden, müssen diese beiden Dateien von der Datei jquery-1.4.2.min.js abhängen.
Unter normalen Umständen müssen Sie die folgenden js-Dateien einführen:

<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>

Nach dem Login kopieren

Allerdings ist im Projekt bereits eine andere jquery-JS-Datei vorhanden, was zu Dateikonflikten führt. Die Einführungsposition einer anderen jQuery-Datei befindet sich hinter der Einführungsposition der oben genannten drei js-Dateien. Zu diesem Zeitpunkt wird die vorhandene jQuery-JS-Datei im Projekt verwendet, wodurch jquery.uploadify.v2.1.4.min.js geladen wird . Dieser Fehler wird gemeldet, wenn in der Datei keine Definition von jquery-bezogenen Funktionen verfügbar ist.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Plug-in hochladen ermöglicht Batch-Upload-Funktion mit Fortschrittsbalken

So erstellen Sie einen Menülink mit Schaltfläche für das jQuery EasyUI-Plugin

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Schritte zur Verwendung des jQuery-Web-Upload-Plug-Ins. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!