Foren oder Post -Bars müssen oft viele Bilder teilen. Die schlechte Möglichkeit, Bilder hochzuladen, besteht darin, sie auf den zentralen Server hochzuladen und dann an den statischen Bildserver weiterzuleiten. In diesem Artikel wird eingeführt, wie Sie Plupload verwenden, um den Upload -Prozess zu optimieren und den Server zu umgehen, um Bilder direkt in Stapel auf YouPai Cloud hochzuladen. In diesem Artikel wird über die folgenden wichtigen Punkte gesprochen:
Die Codekopie lautet wie folgt:
Pluploadbibliothek
Lokale Komprimierung von Bildern
Mehrere Auswahlbilder
Benden Sie den Server um und laden Sie Bilder direkt auf youpaiyun hoch
Verwenden der HTTP -Form -API
Pluploadkonfiguration
Pluploadbibliothek
Plupload ist ein sehr reichhaltiges Bild -Upload -Plugin. Browser mit niedrigem Version können Batch-Uploads über Flash/Silverlight/HTML4 unterstützen, während in Browsern über höhere Versionen Priorität mithilfe der HTML5-Schnittstelle Priorität erhalten. All dies ist automatisch und es kann gesagt werden, dass es sehr bequem zu bedienen ist! Zweitens unterstützt Plupload auch Funktionen wie das Komprimieren von Bildern auf dem Client und das Hochladen direkt auf Drag & Drop. Für Details können Sie auf der offiziellen Website gehen, um weitere Informationen zu erfahren.
Hier verwenden wir nur die Kern -API, sondern stellen einfach eine Datei ein.
Die Codekopie lautet wie folgt:
<script src = "lib/plupload-2.1.2/js/plupload.full.min.js"> </script>
Die vom Beamten angegebenen Kern -API -Beispiele sind sehr einfach. Sie können sie direkt unter http://www.plupload.com/examples/core anzeigen. Es gibt keine Schwierigkeiten beim Verständnis der Kern -API. Wenn Sie Hilfe benötigen, können Sie mir später in diesem Artikel eine Frage stellen.
Lokale Komprimierung von Bildern
Im Allgemeinen ist die Qualität der Bilder, die Sie auf Webseiten stöbern, nicht hoch. Ich erinnere mich, dass der Lehrer, als ich PS in der High School studierte, die Auflösung der Online -Auflösung von Bildern 72 betragen würde, und die gedruckten Bilder müssten 300 betragen. Wenn Benutzer ein großes Foto hochladen, ist es besser, es zu verwenden, um das Bild lokal auf dem Kunden des Benutzers zu komprimieren, was den BROWSIGE -Effekt lobt, und beschleunigen Sie den Aufladungsgeschwindigkeit und reduzieren Sie die Last, die den Server nicht auf den Server aufnehmen.
Die lokale Komprimierungsfunktion des Bildes wird in der Pluploads unterstützt. Geben Sie bei der Initialisierung einfach in einen Größenparameter übergeben. Unter ihnen können die Breite und die Höhe entsprechend der tatsächlichen Situation festgelegt werden, und die Qualität ist ein relativ wichtiger Parameter. Wie der Name schon sagt, ist der Wert umso kleiner, je kleiner das Bild ist, desto schlimmer wird die Anzeigequalität. Sie müssen das selbst wiegen.
Die Codekopie lautet wie folgt:
{
"Größenänderung": {
"Breite": 200,
"Höhe": 200,
"Qualität": 70
}
}
Mehrere Auswahlbilder
Eine der Voraussetzungen für das Batch -Hochladen von Bildern ist die Möglichkeit, mehrere Bilder auszuwählen. Mehrfachauswahldateien sind eine Standardfunktion von HTML5. Wir können den Multi-Select-Modus auf folgende Weise aktivieren:
Die Codekopie lautet wie folgt:
<form action = "xxx">
Wählen Sie Bilder aus: <Eingabe type = "Datei" name = "img" multiple> <!- Multiple ist der Schlüssel hier! ->
<Eingabe type = "subieren">
</form>
Gemäß der Auswahl der Mehrfachdatei in der Browserunterstützung von Jquery-File-Upload hat sich der IE bis IE10 entwickelt, dass es gerade erst begonnen hat, HTML5-Funktionen zu unterstützen. Daher müssen wir die magische Leistung von Flash verwenden, um mehrere selektierte Bilder für Browser mit niedrigerer Version zu unterstützen. Glücklicherweise hat uns Plupload uns geholfen, und dieser Schalter wird standardmäßig aktiviert. Wenn Sie der Meinung sind, dass Sie keine multi-ausgewählten Bilder verwenden müssen, können Sie Multi_Selection: False festlegen, um diese Funktion auszuschalten.
Benden Sie den Server um und laden Sie Bilder direkt auf youpaiyun hoch
YouPaiyun bietet eine HTTP -Form -API. Über diese Schnittstelle können wir direkt eine Anfrage zum Hochladen von Bildern aus dem Browser initiieren, ohne über unseren eigenen Server übertragen zu werden, wodurch der Overhead stark reduziert wird.
Verwenden der HTTP -Form -API
Mit dieser Schnittstelle müssen Sie ein Formular an youpaiyun senden. Dieses Formular enthält die Datei, die Sie hochladen möchten, und muss auch Richtlinien und Unterschriften enthalten. Die Richtlinie wird verwendet, um Parameter im Zusammenhang mit Upload -Anfragen wie Speichernpfad, Dateityp, Vorverarbeitungsergebnissen usw. zu überweisen und auch die Zuschauerzeit für Upload -Anforderungen usw. enthalten. Signatur wird zur Sicherheitsüberprüfung verwendet.
Zur Demonstrationsbequemlichkeit verwenden wir JavaScript direkt, um hier Richtlinien und Unterschriften zu generieren. Aus Sicherheitsgründen werden Sie diesen Vorgang jedoch auf der Serverseite ausführen. Der folgende Code wurde basierend auf der offiziellen Demo geändert, hauptsächlich unter Verwendung des offiziellen Testkontos. Die spezifische Generation Methode dieser beiden Parameter finden Sie im offiziellen Dokument: http://docs.upyun.com/api/form_api/.
Die Codekopie lautet wie folgt:
var options = {
'Bucket': 'Demonstration',,
'Save-Key': '/test/filename.txt',
'Ablauf': math.floor (neues Datum (). GetTime () / 1000) + 86400
};
// Weitere Parameter finden Sie unter: http://docs.upyun.com/api/form_api/#form api Schnittstelle Einführung
var Policy = window.Btoa (json.Stringify (Optionen));
// Formular -API von Upyun User Management Backend erhalten
var form_api_secret = '1+jy2zqd5uvfw6hq8eesyqo50wo =';
// Berechnen Sie die Signatur
var Signature = MD5 (Richtlinie + '&' + Form_API_SECRET);
Pluploadkonfiguration
Wie man Plupload mit YouPaiyuns HTTP -Form -API funktioniert, hat mir wirklich Kopfschmerzen. In dem Dokument, das die Plupload betrachtete, ließ mich die unerwartete Entdeckung die Morgendämmerung sehen. Der Link -Upload zu Amazon S3 zog mich an. Der vollständige Name von Amazon S3 ist der Amazon Simple Storage -Service, und die von ihm bereitgestellten Cloud -Speicherdienste sind denen von YouPaiyun mehr oder weniger ähnlich.
Basierend auf der Einführung in die Browserkonfiguration in diesem Artikel habe ich die Konfiguration herausgefunden, die erforderlich ist, um sie auf youpaiyun hochzuladen. Tatsächlich ist es sehr einfach zu sagen, dass die beiden Parameter URL und Multipart_Params hauptsächlich konfiguriert werden. Die Optionen.
Die Codekopie lautet wie folgt:
var uploader = new plupload.uPloader ({{{
...
URL: 'http://v0.api.upyun.com/' + options.bucket,
Multipart_Params: {
'Dateiname': '$ {Dateiname}', // Hinzufügen, um die Konsistenz über die Laufzeiten hinweg zu erhalten
'Inhaltstyp': '',
'Richtlinie': Richtlinie,
'Signatur': Signatur,
},
...
});
Zusammenfassen
Auf diese Weise haben wir endlich festgestellt, dass das Umgehenden des Servers durch Plupload- und Hochladen von Bildern in Stapeln nach YouPaiyun. Plupload ist wirklich eine sehr leistungsstarke Bibliothek, kann aber für den kommerziellen Gebrauch berechnet werden. Bitte gehen Sie zu seiner offiziellen Website, um mehr zu erfahren!
Ist es nicht sehr einfach? Die Hauptsache ist, dass die Idee sehr gut ist und es wert ist, zu lernen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und jeder wird gemeinsam Fortschritte machen