Introduction au téléchargeur Web
WebUploader est un simple composant de téléchargement de fichiers moderne principalement HTML5 et complété par Flash développé par l'équipe Baidu Webfe (FEX). Dans les navigateurs modernes, nous pouvons donner un jeu complet aux avantages de HTML5, sans abandonner les navigateurs traditionnels IE, et continuer à utiliser le Flash Runtime original, et sont compatibles avec IE6 +, iOS 6+, Android 4+. Les deux ensembles de temps d'exécution, la même méthode d'appel peut être sélectionnée par les utilisateurs à volonté. L'utilisation de la fragmentation de fichiers importante en téléchargement simultané améliore considérablement l'efficacité du téléchargement de fichiers.
Ici, nous utilisons un exemple du site officiel pour télécharger notre avatar personnel.
Notre objectif est de savoir comment télécharger des fichiers à l'aide de Webuploader dans Spring Boot Project, afin que nous puissions implémenter directement une fonction simple pour référence uniquement.
Voici un exemple téléchargé sur le site officiel: fonction de téléchargement d'image avec recadrage.
Nous utilisons des exemples pour rénover les téléchargements d'avatar dans le projet.
L'effet ressemble à ceci:
Tout d'abord, rénovons notre exemple de code Webuploader.
Voici quelques-uns des codes de mon projet:
(function (factory) {if (! window.jQuery) {alert ('jQuery est requis.')} jQuery (function () {factory.call (null, jQuery);});}) (function ($) {// ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Error ('Webuploader ne prend pas en charge le navigateur que vous utilisez. _.Deferred (); Image = new.lib.image (); rès 'Resize', Blob.Size); Image.LoadFromblob (File.Source); Mode. $ .trim ($ ("# base_url"). Val ()) + '/static/webuploader/uploader.swf', filenUMIMIT: 1, // Seuls les fichiers d'image sont autorisés. 'jpg, jpeg, png', // résoudre webuploader chrome cliquez sur la zone de sélection de fichiers de téléchargement pour retarder quelques secondes avant que la réponse ne soit lente mimétype: 'Image / JPG, image / jpeg, image / png' // modifier cette ligne} // fordata: {"Authorization": LocalStorage // Chunched: true, // shash // chunkSize: 10 * 1024 * 1024, // taille Shash Spécifie // les threads: 1, // Nombre de threads // disable }}); }); / ** * Vérifiez le format de fichier et la taille du fichier * / upload.on ("Erreur", fonction (type) {if (type == "Q_TYPE_DENIED") {ShowInfo ("Veuillez télécharger JPG, JEPG, PNG, Format Files");}}); 'uploadsuccress', fonction (fichier) {showInfo ("uploadsuccess");}); File._info.width; ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- var btn = $ ('. upload-btn'); var isBase64Supported, rappel; $ image.cropper ({aspecTratio: 4/4, prévisualisation: ".img-preview", fait: fonction (data) {// console.log (data);}}); fonction srcwrap (src, cb) {// Nous devons vérifier cela lors de la première fois. if (typeof isBase64Supported === 'Undefined') {(function () {var data = new image (); var support = true; data.onload = data.onerror = function () {if (this.width! = 1 || this.height! = 1) {support = false;}} data.src = src; isBase64SUPPORD = subsider; }) (); } if (isBase64Supported) {cb (src); } else {// Sinon, nous avons besoin d'une prise en charge du serveur. // Convertir Base64 en fichier. // $ .ajax ('', {// Méthode: 'post', // data: src, // dataType: 'json' //}). Done (function (réponse) {// if (réponse.result) {// cb (réponse.result); //} else {// alert ("Error de prévision"); //} //}); }} btn.on ('click', function () {callback && callback ($ image.cropper ("getData")); return false;}); return {setSource: function (src) {// gère la base64 non pris en charge. // se produit généralement dans ie6-ie8 srcwrap (src, fonction (src) {$ image.cropper ("setimgsrc", src);}); contener.RemoveClass ('Webuploader-element-invisible'); retourner ceci; }, getImageSize: function () {var img = $ image.get (0); return {width: img.naturalwidth, height: img.naturalHeight}}, setCallback: function (cb) {callback = cb; retourner ceci; }, désactiver: function () {$ image.cropper ("Disable"); retourner ceci; }, activer: function () {$ image.cropper ("activer"); retourner ceci; }}}}}) (); // ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Uploader.crop (données); Uploader.upload (); }); }); // ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------Il existe également des codes pour la page:
Voici le code de la partie du contrôleur:
@RequestMapping (value = "/ student / studentImgFileupload", méthode = requestMethod.post) @ResponSonBody String StudentImgFileupload (@RequestParam multipartFile Fichier, httpservletRequest request) {logger.info ("Student Avatar Upload ...") / Get the File Name String OriginalFileFile Logger.info ("Télécharger le nom du fichier:" + originalFileName) String realPath = request.getServletContex // Ferge Files randomaccessfile rafile = null bufferedInputStream inputStream = null try {file dirfile = new File (realPath, uploadFileName) // Ouvrez le fichier cible d'une manière read-write rafile = new randomaccessfile (dirfile, "rw") rafile.seek (rafile.Legth ()) inputStream = new = new BufferedInputStream (file.getInputStream ()) byte [] buf = new octet [1024] int length = 0 while ((longueur = inputStream.read (buf))! = -1) {rafile.write (buf, 0, longueur)}} catch (exception e) {Flag = false Logger.info ("upload error:" + e.getmessage ()) IoException (e.getMessage ())} enfin {try {if (inputStream! = Null) {inputStream.close ()} if (rafile! = Null) {rafile.close ()}} catch (exception e) {flag = false logger.info ("Erreur de téléchargement:" + e.getMessage ()) Throw }Cela implémente simplement la fonction de l'utilisation de WebUploader pour le téléchargement de fichiers dans le projet Spring Boot.
Résumer
Ce qui précède est le démarrage de printemps présenté par l'éditeur. Il utilise Webuploader pour télécharger des fichiers. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!