Werfen Sie zuerst die Adresse heraus, http://fex-team.github.io/webuPloader/
Es gibt ein relativ vollständiges Demo -Falldokument. Dieser Artikel fügt hauptsächlich eine große Anzahl von Kommentaren basierend auf dem Hochladen von Dateien und dem Bild -Upload hinzu, wodurch im Grunde genommen sichergestellt wird, dass jede Codezeile Kommentare zur Verständnis enthält. Es handelt sich um eine verbesserte Version der offiziellen Website -Demo. Ich hoffe, es kann jedem helfen, das Plug-In besser zu verstehen.
Zunächst, Datei -Upload
jQuery(function() { var $ = jQuery, $list = $('#thelist'), $btn = $('#ctlBtn'), state = 'pending', uploader; // Initialization, you can actually directly access Webuploader.upLoader uploader = WebUploader.create({ // Uncompressed image resize: false, // swf file path swf: BASE_URL + '/js/uploader.swf', senden Sie den Hintergrund für die Verarbeitung und speichern Sie den Server -Server: 'http://webuloader Uploader. Upload ... </p> ' +' </div> '); Unter $ li, und definieren Sie es als $ Prozent-warum zuerst $ prozent $ ict = $ li.find ('. Progress. '</div>') appendto ($ li). erfolgreich Uploader uploader.on ('UploadSuccess', Funktion (Datei) {// Das Ereignis ausgelöst, wenn die Datei hinzugefügt wird, FindState und fügen Sie den Text als $ ('#'+file.id). 'UploadError', Funktion (Datei) {// Das Ereignis ausgelöst, wenn die Datei hinzugefügt wird, fügt den Text als Upload -Fehler $ ('#'+file.id). Datei) {// $ ('#'+file.id) .find ('. Fortschritt'). Fadeout (); sonst (type === 'stopupload') {state = pault '; Wenn auf die Schaltfläche klickt, beginnt das Hochladen gemäß dem Status oder Pause $ btn.on ('klicken', function () {if (state === 'hochladen') {Uploader.stop ();} else {Uploader.Upload ();}});});Laden Sie dann das Bild hoch hoch
jQuery (function () {// JQuery einer globalen Variablen var $ = jQuery, $ list = $ ('#filelist'), // Retina optimieren. Unter Retina ist dieser Wert 2, das Verhältnis von Gerätepixel -Verhältnis Verhältnis = Fenster. Uploader -Instanz -Uploader; " 'GIF, JPG, JPEG, BMP, PNG', Mimetypen: 'Image/*'}}); // Dieses Ereignis wird ausgelöst, wenn eine Datei addiert wird. Info '<div>' + Datei.Name + '</div>' + '</div>'), $ img = $ li.find ('img'); // Rückruf hat zwei Parameter. ThumbnailHeight); $ ('<p> <Pan> </span> </p>') .Andto ($ li) .Find ('span'); '#'+file.id) .Addclass ('Upload-State-Done'); = $ ('<Div> </div>'). AppendTo ($ li);Im Folgenden finden Sie den Java -Hintergrundcode, der zum Abholen hochgeladener Dateien und zum Schreiben des realen Pfads der hochgeladenen Dateien auf den Server verwendet wird
1. Zunächst sollten wir einen Speicherort für die hochgeladenen Dateien erstellen. Der allgemeine Standort ist in temporäre und reale Ordner unterteilt. Dann müssen wir die absoluten Wege dieser beiden Ordner erhalten. Im Servlet können wir das tun.
ServletContext application = this.getServletContext (); String tempDirectory = application.getRealPath (konstant.temp_directory) + "/"; String readirectory = application.getRealPath (konstant.real_directory) + "/";
Erstellen Sie dann eine Dateifabrik, dh ein Lagerhaus, ein Parameter zeigt an, wie groß es ist, Flush zu speichern.
Die Codekopie lautet wie folgt: FileItemFactory Factory = new diskFileItemFactory (constant.size_threshold, neue Datei (tempDirectory));
ServletFileUpload upload = new ServletFileUpload (fabrik);
2. Richten Sie die hochgeladenen Dateien ein
upload.setsizemax (500*1024*1024); // Setzen Sie den Maximalwert dieses Hochladens auf 500 m3, anfragen Sie die Anforderungsbehörde, erhalten Sie die Upload -Datei und schreiben Sie den realen Pfad, ohne eine Ausnahme zu werfen
List <FileItem> list = upload.ParSequest (Anfrage); Iterator <FileItem> iter = list.Iterator (); while (iter.hasnext ()) {FileItem item = iter.next (); //item.isformfield () wird verwendet, um festzustellen, ob das aktuelle Objekt die Daten des Dateiformularfelds ist. Wenn der Rückgabewert wahr ist, bedeutet dies, dass es sich nicht um ein normales Formularfeld handelt, wenn (item.formfield ()) {System.out.println ("Normalformfeld" +item.getfieldname ()); System.out.println (item.getString ("utf-8")); } else {//system.out.println("file Formfeld " + item.getfieldname ()); /** Nur das Feld Dateiformular schreibt den Inhalt im Objekt in den realen Ordner*/String lastpath = item.getName (); // Erhalten Sie den Namen der hochgeladenen Datei lastPath = lastPath.substring (lastPath.lastindexof (".")); String Dateiname = uUid.randomuuid (). ToString (). Ersetzen ("-", "") + lastPath; item.write (neue Datei (ReDLEDirectory+Dateiname)); Paket com.lanyou.support.servlet; import java.io.file; import java.io.ioxception; import java.io.printwriter; import Java.util.list; import Javax.servlet.servlet.servlet; javax.servlet.http.httpServletRequest; importieren javax.servlet.http.httpServletResponse; import net.sf.json.jsonObject; import org.apache.commons.FileUpload.FileTem; org.apache.commons.FileUpload.disk.diskFileItemfactory; import org.apache.commons.FileUpload.servlet.servletFileUpload; import org.apache.commons.logging.log; org.apache.commons.logging.logfactory; import org.apache.struts2.servletactactactacontext; öffentliche KlassendateiEUpload erweitert HttpServlet {private statische endgültige long serialversionuid = 1l; private static logger = logFactory.getLog (FileUpload.class); @Override Protected void dagget (httpServletRequest req, httpServletResponse resp) löst ServletException aus, ioException {dopost (req, resp); } @Override Protected void dopost (httpServletRequest req, httpServletResponse resp) löscht ServletException, IOException {// Datei mit Typ 1 Ereignis 2APK String t = req.getParameter ("T") == NULL? "1": req.getParameter ("t") .trim (); String path = ""; JsonObject ob = new JsonObject (); Versuchen Sie es mit {// Aufgabe, jedes Element in der Anforderungsnachricht in ein separates DiskFileItem -Objekt zu inkapseln // Speichern Sie es im Speicher, wenn die hochgeladenen Dateielemente gering sind, und speichern Sie es in der Festplatte, wenn die Festplatte null ist. ServletFileUpload ServletFileUpload = new ServletFileUpload (factory); // Setzen Sie die hochgeladene Datei servletFileUpload.setsizemax (1024 * 1024 * 2); // Maximum 2m Data ServletFileUpload.SetFileMax (2 * 1024 * 1024); servletFileUpload.setheaDerencoding ("utf-8"); // das Problem des Markennamens gelösten // Die Anforderungsgremium löschen, die hochgeladene Datei abrufen und den realen Pfad schreiben, wenn keine Ausnahme ausgelöst wird // die Dateiliste gemäß der Anforderungsliste <DateineItem> fileInlist = servletFileUpload.ParSereSchr. (REQ); // ein separates Dateiobjekt aus der Dateiliste für (FileItem -Element: FileItemSlist) {// verteidigen, ob die Datei ein gewöhnlicher Formulartyp ist, wobei der Dateityp das Urteilsvermögen if (! Isformfield ()) {// if die hochgeladene Datei größer als die angegebene Größe, Return if (). } // system.out.println ("Die Größe der hochgeladenen Datei:"+item.getSize ()); // system.out.println ("Dateityp hochladen:"+item.getContentType ()); // system.out.println ("Dateiname hochladen:"+item.getName ()); // Dateiname Zeichenfolge String Dateiname = item.getName (); String ent = ""; // Inhaltstyp 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"; } // Welches Format erhalten die Datei if (Dateiname.lastIndexof (".")! } Dateiname = "ev_" + system.currentTimemillis () + ent; // Definieren Sie den Dateipfad, abhängig von Ihrer Ordnerstruktur müssen Sie möglicherweise Änderungen vornehmen, wenn (t.equals ("1") {path = "hochladen/ev/" + Dateiname; } else {path = "upload/pk/" + Dateiname; } // die Datei in der Serverdatei speichern. if (! file.getParentFile (). exist ()) {file.getParentFile (). mkdirs (); } item.write (Datei); // logger.info (Pfad); // brechen; ob.akkumuliert ("URL", Pfad); }} resp.setContentType ("text/html; charSet = utf-8"); resp.getWriter (). Write (ob.toString ()); } catch (Ausnahme e) {e.printstacktrace (); } endlich {// Antwort Client // resp.setContentType ("text/html; charset = utf-8"); // resp.getWriter (). Write (ob.toString ()); }}}Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.