Lassen Sie mich vor dem Einführung des Haupttextes das Wissen über Plupload vorstellen.
Einführung in Plupload
Plupload wurde von Entwicklern von Tinymce entwickelt und bietet ein hoch verfügbares Upload-Plug-In für Ihr Content-Management-System oder ähnliche Upload-Programme. Plupload ist derzeit in eine Kern -API und eine JQuery -Upload -Warteschlangenkomponente unterteilt, mit der Sie sie direkt verwenden oder selbst anpassen können.
Plupload -Funktion
Plupload verwendet JQuery -Komponenten als Warteschlangenkomponente zum Auswahl von Dateien und zum Hochladen von Dateien.
Plupload verwendet Flash, Silverlight, HTML5, Zahnräder, BrowserPlus und FileUpload, um Dateien -Technologie -Motoren hochzuladen.
Durch Plupload können die Anpassung mit der Plupload -Core -API Dateien und Hochladen von Dateien verwenden.
JavaScript wird verwendet, um das Dialogfeld "Dateiauswahl" zu aktivieren. Dieses Dialogfeld "Dateiauswahl" kann so eingestellt werden, dass Benutzer eine separate Datei oder mehrere Dateien auswählen können. Der ausgewählte Dateityp kann ebenfalls eingeschränkt werden, sodass der Benutzer nur die entsprechende angegebene Datei auswählen kann, z. B. JGP; GIF.
Die Plupload ermöglicht die Anpassung einiger Ereignisse während des Upload -Prozesses und schreiben seine eigene Verarbeitungsmethode.
Das Hochladen der ausgewählten Datei ist unabhängig von der Seite und dem Formular, in dem sie sich befindet. Jede Datei wird separat hochgeladen, wodurch sichergestellt wird, dass das serverseitige Skript eine einzelne Datei zu einem Zeitpunkt einfacher verarbeiten kann. Für spezifische Informationen besuchen Sie bitte die offizielle Website von Plupload: http://www.plupload.com/
Hintergrund: Die im Projekt verwendete Front-End-Datei-Upload-Steuerung wurde hochgeladen, und alles war für eine Weile friedlich. "Good News" stammte aus der Szene, und der Kunde wollte das iPad -System benutzen und wollte Bilder hochladen. Der Kundenmeister schlug auf die Stirn und musste Überstunden auf F & E machen. Wie Sie alle wissen, hängt Uploadify von Flash ab, sodass es auf iOS- und Mac -Systemen nicht möglich ist. Nach einigem Google fand ich die Plupload. Es ist einfacher, loszulegen.
Seite HTML -Code:
Das Head -Tag enthält die erforderlichen JS -Dateien
<script type = "text/javaScript" src = "js/jquery-1.9.1.min.js">/script>
<!-Kunstdialog->
<script type = "text/javaScript" src = "artdialog/artdialog.source.js? Skin = Blue"> </script>
<!-Plupload->
<script type = "text/javaScript" src = "plupload/plupload.full.js"> </script>
Seitenelemente im Körper Tag
<!-Auslösen Sie das Popup-Box-> <a id = "uploadBtn" href = "#"> Datei-Upload </a> <div id = "UploadContent" style = "display: keine; Höhe: 300px; Überlauf-x: Hidden; Überlauf-y: auto; id = "Uploadify" href = "javaScript: void (0);"> Datei auswählen </a> </div> <div id = "uploadFilequeue" style = "border: 1px solid #a7c5e2; Höhe: 228px; width: 350px;
Code im Skript -Tag
var GlobalUploader; Funktion _Plupload () {var uploader = new Plupload.Uploader ({RunTimes: 'Html5, Flash, Silverlight, Html4', Browse_Button: 'Uploadify', // ID -Zuschauer des DOM -Objektbrows Die Datei enthält die Datei auf der Seite: 'uplolodent', // Das Divurl. '/uploadAction!localUpload.action',//Receive actionflash_swf_url uploaded by file: '/folder/js/plupload/Moxie.swf',silverlight_xap_url: '/folder/js/plupload/Moxie.xap',filters : {max_file_size : '100mb',//Limit upload Dateigröße MIME_TYPES: [// Hochload -Dateityp einschränken {Titel: "Bilddateien", Erweiterungen: "JPG, GIF, PNG"}]}, init: {postInit: function () {$ ('#UploadFilequeue'). Voranladen}, Vorladung: Funktion (Up, Datei) {// Vor dem Hochladen nach dem Klicken auf die Schaltfläche können Sie die Datei mit demselben Namen abfragen. $ .ajax ({url: "/order/Personal/PersonalAction! GetNewFileName.Action", Typ: "post", async: false, data: {'upFileName': file.name, 'globalPid': GlobalPid}, Datentyp: "JSON", Erfolg: Funktion (Daten) {// //Setoption (Data) {// // setzte den Parameter auf, der den Parameter aufstellte (multipart_param ", multipart_param (data) {//s der parameter upa upupion ('multipart_params' ' {UpFileName: Data.NewFileName, UPFILEType: Datei.name.split (".") [Datei.name.split ("."). Länge - 1], // Suffix UpFileSize: Datei. file ["+file.name+"] fehlgeschlagen ", ''); // $ ('#Uploadify'). Uploadify ('Cancel', File.id); // Eine Upload -Aufgabe abbrechen, indem id}}); + file.name + '(' + plupload.formatsize (file.size) + ') </span> <b> </b> <div> <div> </div> </div> </div> </div>'); i ++;});}, UploadProgress: Funktion (UP, Datei) {// klicken, um das Up -Laden zu starten. Hier können Sie eine Fortschrittsleiste mit Datei.percentDocument.getElementById (Datei.Id) hinzufügen .GetElementsByTagName ('B') [0] .innerhtml = '<span>-' + Datei.Percent + "%</span>"; // Prozent $ ('#' +. '%');//Progress bar},Error: function(up, err) {//Error trigger document.getElementById('console').innerHTML += "/nError#" + err.code + ": " + err.message;},FileUploaded: function(up, file, info) {//Trigger after uploading// Fires when a file is successfully uploaded.data = eval ("(" + info.response + ")"); // Die vom Server zurückgegebenen Daten können die Dateiliste auf der Seite ändern, usw.}, uploadComplete: function (up, Dateien) {// Alle Dateien werden nach dem Hochladen // abgeladen. popupdialog () {artDialog ({id: 'file-upload', Titel: 'Datei-Upload', behoben: true, true: true, Inhalt: $ ("#UploadContent" [0], Button: [{Name 'Start Upload', Focus: TRUE: Funktion () {global plloader.start (); function () {$ ('#UploadFilequeue'). function () {$ ('#UploadFilequeue'). Queue}});} $ (function () {$ ('#uploadBtn'). cLICK (function () {popupDialog ();}); _ plupload ();});Ich werde den Hintergrundcode nicht schreiben. Ich habe die Struts2 -Backend -Aktion verwendet, um die empfangene Datei mithilfe der privaten Dateidatei zu empfangen. Ändern Sie den anderen Namen in Null. Ich weiß noch nicht, wie ich diesen Wert in der Kontrolle festlegen kann.
Dann ist das der Effekt
Wenn Sie diese CSS -Stile in die Fortschrittsleiste hinzufügen möchten, haben Sie die Kontrolle
<style type = "text/css"> #uploadFilequeue {Position: relativ; links: 0; top: 0; border: 1px solid #a7c5e2; margin-bottom: 5px; Höhe: 228px; Breite: 350px; Überlauf-x: Hidden; Überlauf-yo: auto;}. #F5f5f5; */Hintergrundfarbe: #fff; -Webkit-Border-Radius: 3px; Border-Radius: 3px; Schrift: 11px Verdana, Genf, sans-serif;/* margin-top: 5px; */Margin: 5px 5px 5px 5px; Max-Width: 350px; Padding: 10px;Der endgültige Effekt. Was, ich möchte auch hochladen, um die Datei in der Warteschlangengabel zu löschen, OK
Fügen Sie dies stilvoll hinzu
.Uploadify-queue-item .cancel a {Hintergrund: url ('js/uploadify-cancel.png') 0 0 no-repeat; float: rechtNatürlich müssen Sie auch gelösten JS -Code hinzufügen. In der offiziellen API befindet sich REMEDFILE (Datei) hier, aber hier ist es nicht einfach. So wird eine andere Methode verwendet, um sich aufzuteilen (num, Länge), Num von der ersten und Länge ist die Anzahl der gelöschten.
Funktion _PLUpload_RemoveFile (removenum, fileId) {GlobalUploader.files.spleprice (removenum, 1); // Löschen Sie einige Dateien $ (DateiId) .Fadeout ();}Endwirkung.
Das obige ist die vom Editor vorgestellte Plupload+ArtDialog, die Ihnen mit Multi-Plattform-Upload-Dateien vorgestellt werden. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!