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

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

php中世界最好的语言Original: 2018-04-26 11:33:271390Durchsuche

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>

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>

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!

php jquery easyui JS function

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Das jQuery.Uploadify-Plugin implementiert die Funktion zum Stapel-Upload von Bildern mit FortschrittsbalkenNächster Artikel：Das jQuery.Uploadify-Plugin implementiert die Funktion zum Stapel-Upload von Bildern mit Fortschrittsbalken

In Verbindung stehende Artikel

Mehr sehen