Le package JAR Commons-FileUpload fourni par Apache est en effet très simple à télécharger des fichiers. Récemment, je dois utiliser Servlet / JSP pour faire une fonction de téléchargement d'image. J'ai trouvé beaucoup d'informations en ligne, dont la plupart sont introduites sur la base du cadre Struts. Bien que certains d'entre eux introduisent également le téléchargement de Fileupload Common, ces exemples sont relativement anciens et certaines catégories sont désormais abandonnées.
Grâce à la recherche et au résumé de l'étude, la fonction de téléchargement a finalement été terminée. Permettez-moi de le partager avec vous ci-dessous.
Scénarios de cas
Une interface de gestion backend de bibliothèque doit fournir la fonction de téléchargement des images du livre et enfin l'afficher sur la page.
Réaliser l'effet
Entrez la page d'addition de livre et l'image par défaut s'affiche "pas encore de percée" (la longueur et la largeur sont de 200px), et un bouton est fourni pour "télécharger l'image", comme indiqué dans l'image suivante.
Cliquez sur le bouton "Télécharger l'image" et l'interface de téléchargement apparaît via la fenêtre de mode, comme indiqué dans la figure ci-dessous.
Sélectionnez l'image spécifiée via le bouton "Parcourir", cliquez sur le bouton "Télécharger" pour télécharger. Si le téléchargement est réussi, une invite réussie apparaîtra. Une fois que l'utilisateur a cliqué sur "OK", ferme la fenêtre contextuelle et affiche automatiquement la nouvelle image sur la page, comme indiqué dans la figure ci-dessous.
Implémentation de code
① premier Créer un livre Ajouter Page: bookAdd.jsp
La balise cachée avec l'ID de page Photo_ID est utilisée pour stocker le chemin d'image, qui est pratique pour la soumission à l'arrière-plan et stocké dans la base de données, et la balise <Mg> avec l'ID d'IMG_ID est utilisée pour afficher les images. Toutes les images sont stockées sous le serveur pour une lecture facile. Ensuite, un bouton de clé JS, cliquez sur pour faire apparaître la page de téléchargement via la fenêtre Mode. Lorsque la fenêtre de mode est apparue, une victoire variable est définie, qui est utilisée pour obtenir la valeur du chemin d'image transmise par la fenêtre de mode.
(Remarque: En raison de problèmes de sécurité, les images ne peuvent pas être stockées à volonté. Si le projet est déployé sur le serveur, les images ne peuvent être affichées que sous le serveur. Si vous devez lire des images qui ne sont pas sous le serveur actuel, vous devez configurer le répertoire virtuel du serveur)
<html> <éad- head> <ititle> Ajouter un livre </ title> <script type = "text / javascript"> // Ouvrez la fonction de téléchargement de la page Openupload () {var win = window.showmodaldialog ("<% = root%> / admin / bookupload.jsp", "", "dialogwidth: 300px; dialogneight: 300px; scroll: no"); if (win! = null) {document.getElementById ("Photo_id"). Value = win; document.getElementById ("img_id"). src = "<% = root%> /" + win; }} </ script> </ head> <body> <h5> Ajouter le livre </h5> <hr /> <p> couverture de livre: <label> <entrée type = "Hidden" id = "Photo_id" name = "Photo" value = "Images / noimg.png"> <entrée type = "Button" OnClick = "OpenupLoad (Image =" upload Image "/> <bout src = "<% = root%> / images / noimg.png"> </ label> </ body> </html> Page d'image de téléchargement de création, bookupload.jsp
Notez que vous devez définir la balise <base>. Les données peuvent être renvoyées au formulaire parent lorsque la fenêtre du mode actuel est fermée. La balise <form> doit également définir une propriété ENCTYPE = "Multipart / Form-Data" afin que les fichiers soumis puissent être obtenus en arrière-plan. Cliquez sur le bouton "Télécharger" pour transmettre les fichiers à l'arrière-plan. Le point fort restant est le traitement de téléchargement d'arrière-plan.
<html> <éadfride> <meta http-equiv = "contenu-type" contenu = "text / html; charset = gbk"> <meta http-equiv = "pragma" content = "no-cache" /> <span style = "colore: # ff0000;"> <base target = "_ self"> </span> <tapt> <h5> Téléchargement d'image </h5> <hr /> <p style = "Color: Red"> $ {requestscope.errormsg} </p> <form id = "form1" name = "form1" action = "<% = root%> / bookservlet? Type = bookupload" method = "post" Enctype = "multipart / Form-data"> <v> <div> <input type = "file" name = "file_upload" /> </ div> <div> <input type = "soumi" value = "upload" /> </div> </ form> </body> </html> ③Create un servlet ordinaire, seuls certains des codes clés sont fournis ci-dessous
La partie du code rouge est le code clé téléchargé et les autres sont utilisés comme embellissements. Complétez ces trois étapes et un simple téléchargement sera réalisé.
classe publique BookServlet étend httpServlet {private String uploadPath = "eShop / upload /"; // Répertoire de téléchargement de fichiers private String temppath = "eShop / uploadtmp /"; // Répertoire de fichiers temporaire private String ServerPath = null; private int sizemax = 3; // image maximale Limite supérieure String privé [] fileType = new String [] {". jpg", ". gif", ". bmp", ". png", ". jpeg", ". ico"}; public void doGet (demande httpservletRequest, réponse httpservletResponse) lève ServletException, ioException {serverPath = getServletContext (). getRealPath ("/"). remplace ("//", "/"); // Exécuter lorsque le servlet est initialisé. Si le répertoire de fichiers téléchargé n'existe pas, il créera automatiquement if (! New File (serverPath + uploadPath) .isDirectory ()) {new File (serverPath + uploadPath) .mkDirs (); } if (! new File (serverpath + temppath) .isDirectory ()) {new File (serverPath + temppath) .mkDirs (); } <span style = "Color: # ff0000;"> diskfileItemfactory factory = new DiskFileItemFactory (); </span> factory.setsizethReshold (5 * 1024); // maximum cache factory.setRepository (nouveau fichier (serverpath + temppath)); // répertoire de fichiers temporaire <span style = "Color: # ff0000;"> ServletFileupload upload = new ServletFileupLoad (Factory); </ span> upload.setSizEMAX (SIZEMAX * 1024 * 1024); // Limite supérieure maximale de la chaîne de fichier (SIZEMAD =; essayez {<span style = "Color: # ff0000;"> list <FichierItem> items = upload.parsErequest (request); </span> // obtenez tous item.getName (). TolowerCase (); if (fileName.endswith (fileType [0]) || filename.endswith (fileType [1]) || filename.endswith (fileType [2]) || fileName.endSwith (fileType [3]) || fileName.endswith (fileType [4]) || filedAw UUid.randomuuid (). ToString (); filepath = serverpath + uploadPath + uUID + filename.substring (filename.lastIndexof (".")); <span style = "Color: # ff0000;"> item.write (nouveau fichier (filepath)); </span> printwriter pw = réponse.getWriter (); PW.Write ("<Script> alert ('Uploaded réussit'); window.returnvalue = '" + uploadPath + UUID + filename.substring (filename.LastIndexof (".")) + "'; window.close (); </cript>"); pw.flush (); pw.close (); } else {request.setAttribute ("errormsg", "téléchargement échoué, veuillez confirmer que le fichier téléchargé existe et est une image!"); request.getRequestDispatcher ("/ admin / bookupload.jsp"). Forward (demande, réponse); }}}} catch (exception e) {e.printStackTrace (); request.setAttribute ("ErrormSg", "Téléchargement a échoué, veuillez confirmer que la taille du fichier téléchargée ne peut pas dépasser" + sizemax + "m"); request.getRequestDispatcher ("/ admin / bookupload.jsp"). Forward (demande, réponse); }}Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.