Einführung in Plupload
Plupload wurde von Entwicklern von Tinymce entwickelt und bietet ein hoch verfügbares Upload-Plug-In für Ihr Content-Management-System oder ähnliche Upload-Programme. Plupload ist derzeit in eine Kern -API und eine JQuery -Upload -Warteschlangenkomponente unterteilt, mit der Sie sie direkt verwenden oder selbst anpassen können.
1. Effektanzeige
Einbeziehung von Datei -Upload -Panel- und Datei -Upload -Liste
2. Einführung
Kurz gesagt, Spring SpringMVC MyBatis Maven Mysql wird verwendet, um die Multi-File-Upload-Funktion zu realisieren, und der Download verwendet die Form von Streams.
Ich werde einen weiteren Blog eröffnen, um die beteiligten Seiten vorzustellen.
3. Materialien vorbereiten
Plupload
Artdialog
Es gibt auch eine JS -Datei, die das Plugin initialisiert
Diese können direkt aus meiner Freigabeverbindung heruntergeladen werden
Link: http://pan.baidu.com/s/1c27ctak Passwort: BTQJ
Es gibt auch JQuery Download
4. Code Rezeption
Stellen Sie Stile und JS -Dateien ein
<link rel = "stylesheet" href = "ressourcen/css/plupload.css" type = "text/css"> <script src = "ressourcen/js/jquery.min.js"> </script> <script Src = "ressourcen/upload/plupload.Min.Min.js.js"> </cricpt "> </script"> </script "> </script"> </script. src = "Ressourcen/artdialog4.1.7/artdialog.source.js? Skin = Blue"> </script> <script src = "ressourcen/js/upload.js"> </script>
JS -Code
_PlUpload (gebunden UUID, Datei -Upload -Pfad); ① Lassen Sie mich ein Beispiel geben. Die ID des aktuellen Benutzers ist uUid. Sie können die Benutzer -ID mit der Datei, die Sie hochladen, in Verbindung bringen. Wenn Sie in Zukunft abfragen, können Sie alle von der Benutzer -ID hochgeladenen Dateien gemäß der Benutzer -ID abfragen. ② Diese Methode ist verkapselt und kann in Upload.js angezeigt werden. Die Kommentare in meinem Artikel sind sehr klar und Sie können sich auch auf das offizielle Dokument beziehen.
$ (function () {3 $ ('#uploadBtn'). click (function () {popupdialog ();}); _PlUpload ('test', '$ {pageContext.request.ContextPath}/UploadFile');});Seitencode, eine Schaltfläche, ein Popup-Feld
<a id = "uploadBtn" href = "#"> Datei-Upload </a> <!-Trigger das Popup-Feld-> <div id = "UploadContent" style = "display: keine; Höhe: 300px; Überfluss-x: Hidden; Überlauf-y: automatisch; id = "Uploadify" href = "javaScript: void (0);"> Datei auswählen </a> </div> <div id = "uploadFilequeue" style = "border: 1px solid #a7c5e2; Höhe: 228px; width: 350px;
5. Hintergrundcode
Ich habe keine Methode, um es zu verkörpern, damit ich sie selbst zusammenfassen kann, um sie klar zu sehen
/ ** * Datei -Upload -Anfrage -Adresse * * @param Anfrage * @param Antwort */ @RequestMapping ("UploadFile") öffentlicher void -Upload (httpServletRequest Request, httpServletResponse -Antwort) {MultipartPletReTReTRetReTrequest -Datei multipArttpletRetReTRequest) // MultipartPeTtpLeTReTReTReTrequest). (CommonsMultiPartFile) MultipArtrequest.getFile ("Datei"); // Dateistring unid = uuid.randomuuid (). ToString (). Ersetzen ("-", ");/* Datei im Primärschlüssel*/ String OriginalFilename = Datei.getORIGINIGIONSIMED (); String.ValueOf (file.getSize ());/* Dateigröße*/ string path = null;/* Dateispeicherpfad*/ String punid = Anrequenz.getParameter ("punid"); / * Zugeordnete Datei punid */// Datei speichern if (Datei! = Null) {try {string basepath = request.getSession (). GetServletContext (). GetRealPath ("/uploadFile"); SimpleDateFormat SDF = new SimpledateFormat ("/yyyy/mm/dd/"); String subpath = SDF.Format (neues Datum ()); path = basepath + subpath + unid + file.separator + originalFileName; // Wenn der Ordner nicht vorhanden ist, erstellen Sie eine Ordnerdatei DIR = neue Datei (Pfad). if (! Dir.Exists ()) {dir.mkdir (); } file.transferto (Dir); } catch (Ausnahme e) {e.printstacktrace (); }} // Dateigröße Conversion Long kb = 1024; langes MB = KB * 1024; langer GB = MB * 1024; lange Größe = lang.Parselong (fliesesize); if (size> = gb) {fliesize = string.format ("%. 1f gb", (float) size / gb); } else if (size> = mb) {float f = (float) size / mb; fliesesize = string.format (f> 100? "%.0f mb": "%.1f mb", f); } else if (size> = kb) {float f = (float) size / kb; fliesesize = string.format (f> 100? "%.0f kb": "%.1f kb", f); } else {fliesize = string.format ("%d b", Größe); } // Dateiinformationen in die DatenbankdateiEUpload FileUpload = new FileUpload (); FileUpload.SetUnid (UNID); FileUpload.SetoriginalFileName (Originalfilename); FileUpload.setFliesize (fliesesize); FileUpload.setPath (Pfad); FileUpload.setPunid (punid); SimpleDateFormat df = new SimpledateFormat ("yyyy-mm-dd hh: mm: ss"); FileUpload.setflietime (df.format (neues Datum ())); FileUploadService.insert (FileUpload); }Hier kommt eine Download -Methode, bei der Dateiströme gemäß der Datei -ID heruntergeladen werden sollen
@RequestMapping ("DownloadFile") public void downloadloadfile (httpServletRequest -Anforderung, httpServletResponse -Antwort) {String unid = Anrequenz.GetParameter ("unid"); FileUpload FileUpload = FileUploadService.SelectByprimaryKey (UNID); if (FileUpload! String path = FileUpload.getPath (); response.setcharactercoding ("utf-8"); response.setContentType ("Anwendung/Oktett-Stream"); Response.setheader ("Inhaltsdisposition", "Anhang; Dateiname =" + Dateiname); response.setheader ("Inhaltslänge", FileUpload.getfliesize ()); InputStream inputStream = new FileInputStream (neue Datei (Pfad)); OutputStream os = response.getOutputStream (); Byte [] B = neues Byte [2048]; int Länge; while ((länge = inputStream.read (b))> 0) {os.write (b, 0, Länge); } os.close (); inputStream.close (); } catch (FilenotFoundException e) {e.printstacktrace (); } catch (ioException e) {e.printstacktrace (); }}}Es gibt auch eine Möglichkeit, es zu löschen
/ ** * Dateideletion * * @param request * @param antwort */ @ResponseBody @RequestMapPing ("Delfile") public map <String, Objekt> DELIDE (httpServletRequest -Anforderung, httpServletResponse -Antwort) {String unid = request.getParameter ("unid"); FileUpload FileUpload = FileUploadService.SelectByprimaryKey (UNID); // Lokale booleale Flagge löschen = false; Datei Datei = neue Datei (FileUpload.getPath ()); if (file.exists ()) {// Wenn der Pfad eine Datei ist und nicht leer ist, löschen Sie flag = file.delete (); } // Löschen Sie die Datenbank int result = FileUploadService.DeleteByprimaryKey (UNID); if (result> 0) {flag = true; } Map <string, object> map = new HashMap <String, Object> (); map.put ("Ergebnis", Flag); Rückgabekarte; }Das obige ist der ArtDialog+Plupload, der Ihnen vom Herausgeber vorgestellt wurde. 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!