Introduction à Plupload
Plupload est développé par les développeurs de TinyMCE, offrant un plug-in de téléchargement hautement disponible pour votre système de gestion de contenu ou des programmes de téléchargement similaires. Plupload est actuellement divisé en une API de base et un composant de file d'attente JQuery Téléchargez, qui vous permet de l'utiliser directement ou de le personnaliser vous-même.
1. Affichage d'effet
Y compris le panneau de téléchargement de fichiers et la liste de téléchargement de fichiers
2. Introduction
Pour le faire court, Spring Springmvc Mybatis Maven MySQL est utilisé pour réaliser la fonction de téléchargement multi-fichiers, et le téléchargement utilise la forme des flux.
J'ouvrirai un autre blog pour présenter les pages impliquées.
3. Préparer les matériaux
plupload
artdialog
Il existe également un fichier JS qui initialise le plugin
Ceux-ci peuvent être téléchargés directement à partir de ma connexion de partage
Lien: http://pan.baidu.com/s/1c27ctak Mot de passe: BTQJ
Il y a aussi un téléchargement jQuery
4. Code de réception
Introduire des styles et des fichiers JS
<link rel = "Stylesheet" href = "Resources / CSS / Plupload.css" type = "Text / CSS"> <Script Src = "Resources / JS / JQuery.min.js"> </ Script> <Script Src = "Resources / upload / Plupload.full.min.js"> </ Script> <Script src = "Resources / artDialog4.1.7 / artDialog.source.js? Skin = Blue"> </script> <script src = "Resources / js / upload.js"> </ script>
Code JS
_plupload (UUID bindid, chemin de téléchargement de fichiers); ① Concernant UUID lié, permettez-moi de donner un exemple. L'ID de l'utilisateur actuel est UUID. Vous pouvez associer l'ID utilisateur avec le fichier que vous téléchargez. Si vous interrogez à l'avenir, vous pouvez interroger tous les fichiers téléchargés par l'ID utilisateur en fonction de l'ID utilisateur. ② Cette méthode est encapsulée et peut être vue dans upload.js. Les commentaires de mon article sont très clairs et vous pouvez également vous référer au document officiel.
$ (function () {3 $ ('# uploadBtn'). Cliquez sur (fonction () {popupDialog ();}); _plupload ('test', '$ {pageContext.request.contextPath} / uploadfile');});Code de page, un bouton, une boîte contextuelle
<a id = "uploadbtn" href = "#"> File upload </a> <! - Déclenchez la boîte contextuelle -> <div id = "uploadContent" style = "affiche: Aucun; hauteur: 300px; overflow-x: Hidden; overflow-y: Auto;"> <div id = "ChoisInFile"> <pander> Les fichiers simples moins que 100m </ span href = "JavaScript: void (0);"> SELECT Fichier </a> </div> <div id = "uploadFilequeue" style = "Border: 1px solide # a7c5e2; hauteur: 228px; width: 350px;"> </ div> </ div> <pre id = "console"> </ pre>;
5. Code d'arrière-plan
Je n'ai pas de méthode pour l'encapsuler, donc je peux le résumer moi-même pour le voir clairement
/ ** * Adresse de demande de téléchargement de fichiers * * @param demande * @param réponse * / @RequestMapping ("uploadFile") public void upload (httpservletRequest request, httpservletResponse Response) {multiparthTTPServletRequest multipartRequest = (multipartFile File (CommonsMultiPartFile) multipartReQuest.getFile ("file"); // get file String unid = uUid.randomuUid (). ToString (). Remplace ("-", ""); / * File Primary Key String.valueof (file.getSize ()); / * Taille de fichier * / String path = null; / * File Storage Path * / String punID = request.getParameter ("PUNID"); / * Fichier associé PUNID * / // Enregistrer le fichier if (file! = Null) {try {String BasEpath = request.getSession (). GetServletContext (). GetRealPath ("/ uploadfile"); SimpledateFormat sdf = new SimpledateFormat ("/ yyyy / mm / dd /"); String subpath = sdf.format (new Date ()); path = basepath + subpath + unid + file.separator + originalFileName; // Si le dossier n'existe pas, créez un fichier de dossier dir = nouveau fichier (chemin); if (! dir.exists ()) {dir.mkdir (); } file.transferto (dir); } catch (exception e) {e.printStackTrace (); }} // Conversion de taille de fichier Long KB = 1024; long mb = kb * 1024; Long GB = MB * 1024; taille longue = long.parselong (Fliesize); if (size> = gb) {FlieSize = string.format ("%. 1f gb", (float) size / gb); } else if (size> = mb) {float f = (float) taille / mb; FlieSize = string.format (f> 100? "% .0f MB": "% .1f MB", f); } else if (size> = kb) {float f = (float) taille / kb; FlieSize = string.format (f> 100? "% .0f kb": "% .1f kb", f); } else {FlieSize = string.format ("% d b", taille); } // Stocker les informations de fichier dans la base de données FileUpload FileUpload = new FileUpload (); fileUpload.setUnid (UNID); fileUpload.setoriginalFileName (originalFileName); fileUpload.setfiesize (FlieSize); fileUpload.setPath (path); fileUpload.setPunid (PUDID); SimpledateFormat df = new SimpledateFormat ("yyyy-mm-dd hh: mm: ss"); fileUpload.setfliettime (df.format (new Date ())); fileuploadService.insert (fichier upload); }Voici une méthode de téléchargement, qui consiste à utiliser des flux de fichiers à télécharger en fonction de l'ID de fichier
@RequestMapping ("DownloadFile") public void downloadLoadFile (HttpServLetRequest Request, HttpServletResponse Response) {String UNID = request.getParameter ("UNID"); FileUpload fileupload = fileUploadService.SelectByPrimaryKey (UNID); if (fileupload! = null) {try {String filename = new String (fileupload.getoriginalFileName (). GetBytes ("gbk"), "iso-8859-1"); String path = fileupload.getPath (); Response.SetcharAtterencoding ("UTF-8"); Response.SetContentType ("Application / Octet-Stream"); Response.SetHeader ("Content-Disposition", "Pixe; FileName =" + FileName); Response.SetHEader ("Content-Length", FileUpload.getFiesize ()); InputStream inputStream = new FileInputStream (nouveau fichier (chemin)); OutputStream OS = Response.getOutputStream (); octet [] b = nouveau octet [2048]; longueur int; while ((longueur = inputStream.read (b))> 0) {os.write (b, 0, longueur); } os.close (); inputStream.close (); } catch (filenotFoundException e) {e.printStackTrace (); } catch (ioException e) {e.printStackTrace (); }}}Il existe également un moyen de le supprimer
/ ** * Deletion de fichiers * * @param request * @param réponse * / @ResponseBody @RequestMapping ("Delfile") Public Map <String, Object> Defile (httpServleRequest request, httpservletResponse Response) {String UNID = request.getParAmter ("unID"); FileUpload fileupload = fileUploadService.SelectByPrimaryKey (UNID); // Supprimer le drapeau booléen local = false; File file = new File (fileupload.getPath ()); if (file.exists ()) {// Si le chemin est un fichier et n'est pas vide, supprimez Flag = file.delete (); } // Supprimer la base de données int result = fileuploadService.deleteByprimaryKey (UNID); if (result> 0) {flag = true; } Map <string, objet> map = new hashmap <string, object> (); map.put ("result", drapeau); carte de retour; }Ce qui précède est le ArtDialog + Plupload vous présenté par l'éditeur. 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!