Jetez d'abord l'adresse, http://fex-team.github.io/webuploader/
Il y a un document de cas de démonstration relativement complet. Cet article ajoute principalement un grand nombre de commentaires basés sur le téléchargement de fichiers et le téléchargement d'image, ce qui garantit essentiellement que chaque ligne de code a des commentaires pour aider à comprendre. Il s'agit d'une version améliorée de la démonstration officielle du site Web. J'espère que cela peut aider tout le monde à mieux comprendre le plug-in.
Tout d'abord, le téléchargement de fichiers
jQuery (function () {var $ = jQuery, $ list = $ ('# thelist'), $ btn = $ ('# ctlbtn'), state = 'en attente', uploader; // initialisation, vous pouvez en fait accéder directement à webuploader.uploader uploader = webuploadher.create ({// non compressé Resize: fall, fall, // swf Path Swf: Base_Url + non compressé Resize: FAUX, FALS '/js/uploadher.swf', // Envoyez le code d'arrière-plan pour le traitement et l'enregistrement du serveur: 'http://webupload.duapp.com/server/fileupload.php', // sélectionnez le bouton pour sélectionner un élément d'entrée. événement. Téléchargez ... </ p> '+' </ div> ');}); sous $ li, et définissez-le comme $ pour cent ------ pourquoi chercher d'abord pour créer $ pour cent = $ li.find ('. Progress .Progress-bar'); '</ div>'). APPENDTO ($ li). avec succès uploader uploader.on ('uploadsuccess', fonction (fichier) {// l'événement déclenché lorsque le fichier est ajouté, finir et ajouter le texte comme $ ('#' + file.id) .find ('p.state'). Text ('uploaded');}); 'uploadError', fonction (fichier) {// L'événement déclenché lorsque le fichier est ajouté, findState, et ajoute le texte en tant qu'erreur de téléchargement $ ('#' + file.id) .find ('p.state'). ) {// Appel $ ('#' + file.id) .Find ('. Progress'). Fadeout ();}); (type === 'stopupload') {state = 'pause'; Cliquez sur, le téléchargement commence en fonction de l'état ou de la pause $ btn.on ('cliquez', function () {if (state === 'uploading') {uploader.stop ();} else {uploader.upload ();}});});Puis téléchargez l'image
jQuery (function () {// Attribuez jQuery à une variable globale var $ = jQuery, $ list = $ ('# fileList'), // optimiser la rétine, sous la rétine, cette valeur est 2, le rapport de rapport pixel de périphérique Ratio = Window.DevicePixelRatio || 1, // Taille de la tasse / 15 Uploader instance uploader; 'http://webuploadher.duapp.com/server/fileupload.php', // Sélectionnez le bouton de fichier. mimetypes: 'image / *'}}); '</ div>'), $ img = $ li.find ('img'); L'adresse de la vitralité Uploader.MaketHumb (Fonction, Src) {IF (ERROR) {$ IMG.replacewith ('<span> ne peut upload. $ pour cent.cs (largeur ', pourcentage * 100 + «%»); réalité téléchargement. Une fois le téléchargement terminé, il est réussi ou échoué, supprimez d'abord la barre de progression.Vous trouverez ci-dessous le code d'arrière-plan Java, utilisé pour obtenir des fichiers téléchargés et écrire le chemin réel des fichiers téléchargés sur le serveur
1. Tout d'abord, nous devons créer un emplacement de stockage pour les fichiers téléchargés. L'emplacement général est divisé en dossiers temporaires et réels. Ensuite, nous devons obtenir les chemins absolus de ces deux dossiers. Dans le servlet, nous pouvons le faire.
ServletContext application = this.getServletContext (); String tempDirectory = application.getRealPath (constant.temp_directory) + "/"; String realDirectory = application.getRealPath (constant.real_directory) + "/";
Créez ensuite une usine de fichiers, c'est-à-dire un entrepôt, un paramètre indique à quel point il est grand pour stocker la chasse d'eau.
La copie de code est la suivante: FileItemFactory Factory = new DiskFileItemFactory (constante.size_threshold, nouveau fichier (tempDirectory));
ServletFileUpload upload = new ServletFileUpload (Factory);
2. Configurer les fichiers téléchargés
upload.setSizEMax (500 * 1024 * 1024); // définir la valeur maximale de ce téléchargement à 500m3, analyser le corps de la demande, obtenir le fichier de téléchargement et écrire le chemin réel sans lancer une exception
List <FichierItem> list = upload.parseRequest (request); Iterator <FichierItem> iter = list.iterator (); while (iter.hasnext ()) {fileItem item = iter.next (); //item.isformfield () est utilisé pour déterminer si l'objet actuel est les données du champ de formulaire de fichier. Si la valeur de retour est vraie, cela signifie qu'il ne s'agit pas d'un champ de formulaire normal if (item.isformField ()) {System.out.println ("champ de formulaire normal" + item.getFieldName ()); System.out.println (item.getString ("UTF-8")); } else {//system.out.println("file Form Field "+ item.getFieldName ()); / * * Seul le champ de formulaire de fichier écrit le contenu dans l'objet du dossier réel * / string lastpath = item.getName (); // Obtenez le nom du fichier téléchargé lastpath = lastpath.substring (lastpath.lastidexof (".")); String filename = uuid.randomuuid (). ToString (). Remplace ("-", "") + LastPath; item.write (nouveau fichier (realDirectory + nom de fichier)); Package com.lananyou.support.servlet; import java.io.file; import java.io.ioexception; import java.io.printwriter; import java.util.list; import javax.servletservlet; javax.servlet.http.httpservletRequest; import javax.servlet.http.httpservletResponse; import net.sf.json.jsonObject; import org.apocons.commons.fileupload.fileitem; import org.apache.comons.fileupload.fileItemfactory; Importor; org.apache.commons.fileupload.disk.diskfileItemfactory; import org.apache.commons.fileupload.servlet.servletfileupload; import org.apache.commons.logging.log; import org.apache.commons.logging.logfactory; importation org.apache.commons.logging.logfactory; importation org.apache.commons.logging.logfactory; Import Org.apache.commons.logging.Logfactory; Import Org.apache.Commons.Logging.Logfactory; Import Org.apache.Commons.Logging.Logfactory; Import Org.apache.Commons.Logging.Logfactory; Import Org.APACH org.apache.struts2.ServletActionContext; public class Fileupload étend httpServlet {private static final long SerialVersionUID = 1l; Logger de journal statique privé = logfactory.getLog (fileupload.class); @Override Protected void doGet (httpSservletRequest req, httpservletResponse resp) lève ServletException, ioException {doPost (req, resp); } @Override Protected void doPost (httpServletRequest req, httpservletResponse resp) lève ServletException, ioException {// Fichier de téléchargement avec l'événement de type 1 2APK String t = req.getParameter ("t") == null? "1": req.getParameter ("t") .trim (); String path = ""; JSONObject ob = new JSONObject (); Essayez {// tâche pour encapsuler chaque élément du message de demande dans un objet disque de disque distinct // Enregistrez-le en mémoire lorsque les éléments de fichier téléchargés sont petits, et enregistrez-le dans le disque lorsque le disque est zéro.//create a fichier warehouse (factory) fileItemfactory factory = new DiskFileItemfactory (); ServletFileUpload ServletFileUpload = new ServletFileUpload (Factory); // Définissez le fichier téléchargé servletFileUpload.SetSizEMax (1024 * 1024 * 2); // Maximum 2M Data ServletFileupload.SetFilesizax (2 * 1024 * 1024); ServletFileUpload.SetheDerencoding ("UTF-8"); // Résoudre le problème des noms de fichiers brouillé // Résoudre le corps de la demande, obtenir le fichier téléchargé et écrire le chemin réel si aucune exception n'est lancée // Obtenez la liste des fichiers selon la liste de demande <FichierItem> FileItemsList = ServletFileUpload.Parserequest (REQ); // récupérer un objet de fichier séparé de la liste de fichiers pour (FileItem Item: FileItemsList) {// Déterminez si le fichier est un type de formulaire ordinaire, où le type de fichier entre dans le jugement if (! Item.isformField ()) {// Si le fichier téléchargé est supérieur à la taille spécifiée, return; } // System.out.println ("La taille du fichier téléchargé:" + item.getSize ()); // System.out.println ("Télécharger le type de fichier:" + item.getContentType ()); // System.out.println ("Télécharger le nom du fichier:" + item.getName ()); // Télécharger le nom de fichier String filename = item.getName (); String ent = ""; // Type de contenu if (item.getContentType (). EqualSignoreCase ("image / x-png") || item.getContentType (). EqualSignoreCase ("image / png")) {ent = ".png"; } else if (item.getContentType (). equalSignoreCase ("image / gif")) {ent = ".gif"; } else if (item.getContentType (). equalSignoreCase ("image / bmp")) {ent = ".bmp"; } else if (item.getContentType (). equalSignoreCase ("image / pjPEG") || item.getContentType (). equalSignoreCase ("image / jpeg")) {ent = ".jpg"; } // quel format est l'obtention du fichier if (filename.lastindexof (".")! = -1) {ent = filename.substring (filename.LasTindexof (".")); } filename = "ev_" + System.currenttimemillis () + ent; // Définissez le chemin du fichier, en fonction de la structure de votre dossier, vous devrez peut-être apporter des modifications si (t.equals ("1")) {path = "upload / ev /" + filename; } else {path = "upload / pk /" + filename; } // Enregistrez le fichier dans le fichier de serveur Fichier = nouveau fichier (req.getSession (). GetServletContext () .getRealPath (path)); if (! file.getParentFile (). existant ()) {file.getParentFile (). MkDirs (); } item.write (fichier); // logger.info (chemin); // casser; ob.accumulate ("URL", chemin); }} resp.setContentType ("text / html; charset = utf-8"); resp.getWriter (). Write (ob.toString ()); } catch (exception e) {e.printStackTrace (); } Enfin {// Response Client // resp.setContentType ("text / html; charset = utf-8"); // resp.getWriter (). Write (ob.toString ()); }}}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.