Einführung in den Web -Uploader
WebuPlader ist eine einfache moderne Datei -Upload -Komponente hauptsächlich HTML5 und ergänzt durch Flash, das vom Baidu Webfe (FEX) -Team (FEX) entwickelt wurde. In modernen Browsern können wir den Vorteilen von HTML5 volles Spiel geben, ohne die Mainstream -IE -Browser aufzugeben und weiterhin die ursprüngliche Flash -Laufzeit zu verwenden, und sind mit IE6+, iOS 6+, Android 4+ kompatibel. Die beiden Laufzeitsätze, dieselbe Anrufmethode kann nach Belieben von Benutzern ausgewählt werden. Die Verwendung einer großen Dateifragmentierung gleichzeitig das Hochladen verbessert erheblich die Effizienz des Datei -Hochladens.
Hier verwenden wir ein Beispiel von der offiziellen Website, um unseren persönlichen Avatar hochzuladen.
Unser Fokus liegt auf dem Hochladen von Dateien mithilfe von WebuLader im Spring -Boot -Projekt, damit wir nur eine einfache Funktion als Referenz implementieren können.
Hier ist ein Beispiel, das von der offiziellen Website heruntergeladen wurde: Image -Upload -Funktion mit Zuschneiden.
Wir verwenden Beispiele, um Avatar -Uploads im Projekt umzubauen.
Der Effekt sieht so aus:
Lassen Sie uns zunächst unseren WebuLader -Beispielcode umbauen.
Das Folgende sind einige der Codes in meinem Projekt:
(Funktion (factory) {if (! window.jQuery) {alert ('jQuery ist erforderlich.')} jQuery (function () {factory.call (null, jQuery);});}) (Funktion ($) {// --------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ ERROR ('WebuPlader unterstützt den Browser, den Sie verwenden, nicht.'); _.Deferred (); Image.once ('complete', function () {var blob, size; // mobiler UC / QQ-Browser im bildfreien Modus // ctx.getImagedata wird eine Ausnahme melden, wenn große Bilder // index_size_err: DOM-Ausnahme 1 Try {BloB = Image.getasbob (); size = File.SISICE.SRICE.SIRCE; Blob.Size, Größe); Image.loadFromBlob (Datei.Source); Erntemodus. $ .trim ($ ("#Base_url"). Val ()) + '/static/WebuLloader/uploader.swf', FilenumLimit: 1, // nur Bilddateien sind erlaubt. 'JPG, JPEG, PNG', // WebuLader Chrome löschen Klicken Sie auf das Box der Upload -Datei, um einige Sekunden zu verzögern, bevor die Antwort langsam Mimetypen: 'Image/JPG, Bild/JPEG, Bild/Png' // modifizieren Sie diese Zeile} // Formdata: {"Autorisierung": LocalStorage kann nicht. // Chunked: TRUE, // Shash // ChunkSize: 10 * 1024 * 1024, // Shash -Größe gibt // Threads: 1, // Anzahl von Threads // deaktivieren Globaldnd: true // Deaktivieren Sie Drag // onerror: function () {// var args = []. //}}); }); 'UploadSuccess', Funktion (Datei) {ShowInfo ("UploadSuccess"); file.info.width; ----------------------------------------------------------------------------------------------------------------------------------------------------------------- var btn = $ ('. Upload-btn'); var isbase64Supportiert, Rückruf; $ image.cropper ({asspectratio: 4/4, preview: ".img-preview", erledigt: function (data) {// console.log (data);}}); Funktion SRCWRAP (SRC, CB) {// Wir müssen dies zum ersten Mal überprüfen. if (typeof isbase64Supported === 'undefined') {(function () {var data = new Image (); var Support = true; data.onload = data.onError = function () {if (this. this.width! = 1 || this.height! } if (isBase64Supported) {CB (SRC); } else {// sonst brauchen wir Serverunterstützung. // Base64 in eine Datei konvertieren. // $ .ajax ('', {// methode: 'post', // data: src, // dataType: 'json' //}). Done (Funktion (Antwort) {// if (response.result) {// cb (response.result); // {{// alter ("// //} //});; }} btn.on ('click', function () {callback && callback ($ image.cropper ("getData")); cip false;}); return {setSource: function (src) {// handle Base64 nicht unterstützt. // tritt im Allgemeinen in IE6-IE8 srcWrap (SRC, Funktion (SRC) {$ image.cropper ("setImgsrc", src) auf;}); container.removeclass ('webuLader-Element-invissible'); gib dies zurück; }, getImageSize: function () {var img = $ image.get (0); return {width: img.naturalwidth, Höhe: img.naturalHeight}}, setCallback: function (cb) {callback = cb; gib dies zurück; }, deaktivieren: function () {$ image.cropper ("deaktivieren"); gib dies zurück; }, aktivieren: function () {$ image.cropper ("enable"); gib dies zurück; }}}}}) (); // ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Uploader.Crop (Daten); Uploader.Upload (); }); }); // ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------Es gibt auch einige Codes für die Seite:
Hier ist der Code für den Controller -Teil:
@RequestMapping (value = "/student/studentImgFileUpload", method = requestMethod.post) @ResponseBody String studentImgFileUpload (@RequestParam MultiPartFile -Datei httpServletrequestanfrage) {logger.info ("studentArga -avatar upload ..."). logger.info ("Dateiname hochladen:" + originalFileName) String realpath = request.getServletContext (). getRealPath ("/public/student/") String UploadFileName = System.currentTimillis () + "_" + originalfileName.info. Dateien RandomAccessfile Rafile = Null BufferedInputStream InputStream = NULL Try {Datei Dirfile = Neue Datei (RealPath, UploadFileName) // Die Zieldatei read-write-Weise öffnen Rafile = new randomAccessfile (Dirfilfile, "rw") rafile.seek (RAFILEM () ())). byte [] buf = new Byte [1024] int länge = 0 while ((länge = inputStream.read (buf))! (InputStream!Dies implementiert lediglich die Funktion der Verwendung von WebuPlader für das Datei -Upload im Spring -Boot -Projekt.
Zusammenfassen
Das obige ist der Spring Boot, der Ihnen vom Herausgeber vorgestellt wurde. Es verwendet Webuloader zum Hochladen von Dateien. 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!