1. Kursüberblick
Bei der Entwicklung des Webanwendungssystems ist die Datei -Upload -Funktion eine sehr häufige Funktion. Lassen Sie uns heute hauptsächlich über die relevante technische Implementierung der Datei -Upload -Funktion in Javaweb sprechen. Mit der raschen Entwicklung der Internet -Technologie werden die Erfahrung der Benutzer für Websites immer höher. Es gibt auch viele innovative Punkte in der Technologie der Datei-Upload-Funktion, z.
Grundlagen, die für diesen Kurs erforderlich sind:
Verstehen Sie den grundlegenden HTTP -Protokollgehalt
Grundlegende Technologie für IO -Stream -Betrieb
Grundlagen von Servlet
Grundkenntnisse über JavaScript/JQuery -Technologie
2. Grundlagen des Datei -Uploads
Für das Upload des Datei -Uploads gibt der Browser die Datei während des Upload -Prozesses auf die Serverseite in Form eines Streams ein, und alle Streaming -Daten werden mit der HTTP -Anforderung auf die Serverseite übertragen. Daher muss das Format des angeforderten Inhalts beim Hochladen der Datei im Grunde genommen verstanden werden.
Datei -Upload -Seite:
<form action = "/itheimaupload/uploadServlet" methode = "post" engType = "MultiPart/Formdata"> Bitte wählen Sie die hochgeladene Datei: <Eingabe type = "Datei" name = "Anhang"/> <br/> <Eingabe type = "value =" value = "sure"/> </Form> Form> Form> Form> Form> Form>
HTTP -Anforderungsinhalt:
3. Java Hintergrund verwendet Servlet, um Dateien zu empfangen
Es ist problematisch, wenn Sie Servlet verwenden, um den Eingangsstrom von hochgeladenen Dateien zu erhalten und dann die Anforderungsparameter anzualysieren. Im Allgemeinen wählt der Hintergrund die Verwendung der COMMOL-FileUpload-Datei-Upload-Komponente, das Open-Source-Tool von Apache.
// Java-Hintergrundcode: Commons-fileUpload-Komponente Upload-Datei öffentliche Klasse UploadServlet erweitert HttpServlet {public void dodget (httpServletRequest-Anforderung, httpServletResponde-Antwort) löst ServletException, IOException {// 1 aus. Cache cache diskfileItemfactory factory = new diskFileItemfactory (1*1024*1024, neue Datei ("C:/tempfiles/"); // 2. Erstellen Sie ServleFileUpload-Objekt ServletFileUpload sfu = new servletFileUpload (Factory); // Lösen Sie das chinesische Problem des Dateinamens sfu.setheaDerencoding ("utf-8"); // 3. Resolve try {list <FileItem> list = sfu.parsequest (request); // Alle Inhalte auflösen if (list! value = item.getString ("utf-8"); } else {// Datei if (item.getName ()! (FileUploadexception e) {e.printstacktrace ();}} public void dopost (httpServletRequest -Anforderung, httpServletResponse -Antwort) löst ServletException, IOException {doget (Anfrage, Antwort);}} aus4. Verwenden Sie WebuPlader, um Komponenten hochzuladen
Am vorderen Ende der Datei -Upload -Seite können wir einige nützliche Upload -Komponenten verwenden, z. Diese Komponente kann im Wesentlichen einige tägliche Funktionen des Datei-Uploads erfüllen, z. B. das asynchrone Hochladen, das Hochladen von Drag-and-drop, das Einfügen von Hochladen, das Hochladen von Fortschrittsüberwachung, die Miniaturansichten von Dateien und sogar große Dateibestandteile, um die Übertragung fortzusetzen, und eine große Dateiübertragung in Sekunden.
Laden Sie die Webupload -Komponente herunter
http://fex.baidu.com/webuloader/ Das WebUpload -Paket auf der offiziellen Webupload -Website herunterladen
Webupload -Verzeichnisstruktur:
Basisdatei -Upload -Demo (einschließlich Upload -Fortschritt)
Frontend
1.1 Importieren Sie die erforderlichen CSS, JS auf der Seite
<link rel = "styleSheet" type = "text/css" href = "$ {pageContext.request.contextPath} /css/webuPloader.csss"> <script type = "text/javascript" } /js/jquery-1.10.2.min.js "> </script> <script type =" text/javaScript "src =" $ {pageContext.request.contextPath} /js/webuPlader.js "> </script>1.2 Schreiben Sie das Upload -Seiten -Tag
<!-hochladen div-> <div id = "uploader"> <!-Dateilisteninformationen anzeigen-> <ul id = "filelist"> </ul> <!-Dateibereich auswählen-> <div id = "filePicker"> Klicken Sie, um die Datei auszuwählen </div> </div>
1.3 Webupload -Code schreiben
<script type = "text/javaScript"> // 1. Initialisieren Sie webuload und konfigurieren Sie die globalen Parameter var uploader = webUlader.create ({// Flashk Control Adresse SWF: "$ {pageContext.request.Contextpatpat Tag Pick: "#filePicker", // automatische Datei automatisch hochladen: true,}); // 2. Nach der Auswahl der Datei werden die Dateiinformationswarteschlange angezeigt // Registrieren Sie das Datoqueed -Ereignis: Ausgelöst, wenn die Datei zur Warteschlange hinzugefügt wird // Datei: Repräsentiert die aktuell ausgewählte Datei uploader.on ("FileQuEed", Funktion (Datei) {// Dateiinformationen div $ ("#FileList"). Append ("<Div ID =" "+". class = 'fileInfo'> <span> "+file.name+" </span> <div class = 'Status'> Warten auf Upload ... </div> <span class = 'text'> </span> </div> ");}); // 3. Registrieren Sie Fortschritt des Fortschritts hochladen // Datei: Datei hochladen // Prozentsatz: Der Anteil des aktuellen Fortschritts. Das Maximum beträgt 1. Zum Beispiel: 0.2Uploader.on ("UploadProgress", Funktion (Datei, Prozentsatz) {var id = $ ("#"+file.id); // Statusinformations -ID.Find ("Div.State"). Text ("Upload ..."); // Aktualisieren Sie den Hochladen von Upload -Prozentsatz id.find ("span.text"). text (math.round (prozentual*100)+"%");}); // 4. Registrieren und hochladen Hören // Datei: Hochgeladene Datei // Antwort: Daten, die vom Hintergrund zurückgegeben werden, uploader.on ("UploadSuccess", Funktion (Datei, Antwort) {// Statusinformationen $ ("#"+file.id) .find ("Div.State"). Text ("Uploaded");});2) Backend Servlet Code
DiskFileItemFactory factory = new diskFileItemfactory (); servletFileUpload sfu = new ServletFileUpload (Factory); Element: Elemente) {if (item.isformfield ()) {// Normale Informationen} else {// Dateiinformationen // Richten Sie, dass nur Dateien gespeichert und verarbeitet werden müssen. Datei (ServerPath+"/"+item.getName ()); System.out.println ("Datei erfolgreich gespeichert");}}} catch (FileUploadexception e) {E.printStacktrace ();};};};Bildmedumbänder erzeugen
Schlüsselpunkt: Rufen Sie Uploader.Makethumb () -Methode auf, um Miniaturansichten zu generieren
Uploader.on ("FilequeUed", Funktion (Datei) {// Dateiinformationen div $ ("#filelist"). append ("<div id = '"+file.id+"' class = 'fileInfo'> <img/> <span>"+file.name+"</span> <div class = 'state' class = 'text'> </span> </div> "); // Image Thumbnails machen: rufen Sie Makethumb () Methode auf // Fehler: Fehler beim Erstellen von Miniaturansichten // Src: Pfad der Thumbnails Uploader.Makethumb (Datei, Funktion (Fehler, Src) {var id = $ ("#"Datei". if (Fehler) {id.find ("IMG"). Ersetzen Sie ("nicht vorschau");} // Wenn es erfolgreich ist, wird die Miniatur an der angegebenen Positions -ID.Find ("img"). Attr ("SRC", SRC);Ziehen, einfügen und hochladen
1) Fügen Sie dem Drag -Bereich auf der Seite einen Div hinzu
<!-hochladen div-> <div id = "uploader"> <!-Datei Drag Area-> <div id = "dndArea"> <p> Ziehen Sie die Datei hier direkt, um automatisch </p> </div> <!-Anzeigedateilisteninformationen-> <ul id = "FileList"> </ul <!
2) Fügen Sie den globalen Konfigurationsparametern des WebuLaders Ziehen- und Drop -Parameter hinzu
// 1. Initialisieren Sie webuload und konfigurieren Sie die globalen Parameter var uploader = webUlader.create ({// Flashk Control Adresse SWF: "$ {pageContext.request.Contextpatpat Tag Pick: "#filePicker", // automatische Datei automatisch hochladen: TRUE, // Aktivieren Sie die Drag & Drop -Funktion, geben Sie den Drag -Bereich an.Laden Sie große Dateien in Stücke hoch
1) Fügen Sie den globalen Parametern des WebuLaders Block -Upload -Parameter hinzu
// 1. Initialisieren Sie webuload und konfigurieren Sie die globalen Parameter var uploader = webUlader.create ({// Flashk Control Adresse SWF: "$ {pageContext.request.Contextpatpat Tag Pick: "#filePicker", // automatische Datei automatisch hochladen: TRUE, // Die Drag & Drop -Funktion aktivieren, den Drag -Bereich DND angeben: "#dndArea", // Seiten -Drag & Drop -Funktion an anderen Orten deaktivieren, um zu verhindern, dass die Seite die Datei direkt deaktiviert wird, die Globaldnd: true, // Enable Paste -Funktion: "#### -adopplader", ////aduplodier ", uploader", uplodierer ", uplodierer", uplodierer ", uplodier", uploloder ", adopplader: Chunked: TRUE, // Dateigröße pro Block (Standard 5m) ChunkSize: 5*1024*1024, // Öffnen Sie mehrere gleichzeitige Threads (Standard 3) Threads: 3, // beim Hochladen der aktuellen Datei, präparExtextfile: true});2) Überwachen Sie drei Zeitpunkte zum Hochladen von Dateien
Nach dem Hinzufügen der oben genannten drei Konfigurationen werden Sie feststellen, dass der WebuLader die Datei automatisch an den Hintergrund sendet, wenn die Datei 5 m überschreitet.
Jede Blockanforderung enthält Informationen:
Sie können drei wichtige Zeitpunkte in Datei -Uploads in Stücken anhören.
Vor-Send-Datei: Rufen Sie vor dem Senden vor dem Senden an: Wenn Blöcke vorhanden sind, rufen Sie After-Send-File an, bevor jeder Block gesendet wird: Rufen Sie nach, nachdem alle Blöcke gesendet wurden // 5. Überwachen Sie die drei Zeitpunkte des Hochladens der Datei (Hinweis: Dieser Codeabschnitt muss vor dem WebuLader platziert werden. Breakpoint Continuous-Übertragung) // Schritt 3: Nachdem alle Brocken erfolgreich hochgeladen wurden (1. Benachrichtigen Sie den Hintergrund von Chunk-Dateien, um zusammenzuarbeiten). Alle Teile vor der Abteilung: Funktion () {// 1. Fordern Sie an, ob der Hintergrund den aktuellen Block gespeichert hat. Wenn es vorhanden ist, überspringen Sie die Blockdatei, um die Breakpoint -kontinuierliche Übertragungsfunktion zu realisieren. Wenn es in Blöcken hochgeladen wird, werden alle Blockdateien über den Hintergrund zusammengeführt}});Logik vor der Datei vor der Datei:
// Verwenden Sie die md5File () -Methode, um das eindeutige Tag der Datei zu berechnen // Diese Funktion empfängt eine deferredBeForesendfile: Funktion (Datei) {// Erstellen Sie eine deferredVar deferred = webUlader.Deferred (); // 1. Berechnen Sie das eindeutige Tag der Datei, das für die kontinuierliche Übertragung und die zweite Übertragung von Breakpoint verwendet wird. abgerufen ... ");}). Dann (Funktion (val) {UniqueFiletag = val; $ ("#"+file.id) .find (" Div.State "). Text (" erfolgreich erhaltene Dateiinformationen "); // nur, wenn die Dateiinformationen erfolgreich erhalten werden, wird die nächste Operation durchgeführt. Fordern Sie an, ob der Hintergrund die Datei gespeichert hat. Wenn es vorhanden ist, wird die Datei übersprungen, um die zweite Passfunktion zu realisieren // Rückgabe aufgeschoben.Promise ();}Vor-Send-Logik:
// Senden Sie ein eindeutiges Tag der aktuellen Datei an den Hintergrund, mit dem ein Verzeichnis erstellt wird, mit dem die Chunked -Datei vor: function () {// das eindeutige Tag der aktuellen Datei auf den Hintergrund tragen, mit dem ein Verzeichnis erstellt wird, mit dem die Stücke this.unnions.Options.Filemd5 = filemd5;};};};};};};};};};};} verwendet wird.3) Der Hintergrund muss alle geschnittenen Dateien speichern
// Erstellen Sie ein Verzeichnis für jede Datei und speichern Sie alle Chunked -Dateien dieser Datei // Beurteilen Sie, ob sie in Teilen hochgeladen wurde, wenn (Teile! if (! Chunksdir.exists ()) {Chunksdir.mkdir ();} if (chunk!4) Die Rezeption benachrichtigt das Backend, um alle Chunked -Dateien zusammenzuführen
// Die Rezeption benachrichtigt den Hintergrund, um Dateien After-Send-File-Logik zu verschmelzen: AfterSendfile: Funktion (Datei) {// 1. Wenn Sie in Töpfen hochgeladen sind, fusionieren Sie alle Chunk -Dateien über den Hintergrund // fordern Sie den Hintergrund an, um Dateien zu verschmelzen. fileName:file.name},dataType:"json",success:function(response){alert(response.msg);}});}//Background merge all chunked files if("mergeChunks".equals(action)){System.out.println("Start merge files...");//Merge file String fileMd5 = request.getParameter("fileMd5");String fileName = request.getParameter("fileName");//Read all files in the directory File f = new File(serverPath+"/"+fileMd5);File[] fileArray = f.listFiles(new FileFilter(){//Exclude directory, as long as the file public boolean accept(File pathname) {if(pathname.isDirectory()){return false;}return true;}});//Convert to a collection to facilitate sorting List<File> fileList = new ArrayList<File>(Arrays.asList(fileArray));//Sort from small to large Collections.sort(fileList, new Comparator<File>() {public int compare(File o1, File o2) {if(Integer.parseInt(o1.getName())) < Integer.ParseInt (o2.getName ()) {return -1;} return 1;}}); Dateiausgabedatei = new Datei (ServerPath+"/"+Dateiname); // Die Dateiausgabe ausgiptfile.CreateNewFile (); // Ausgabe Stream -Filchannel Outchannel = new FileOutputStream (Ausgabe). für (Dateidatei: filelist) {inchannel = new FileInputStream (Datei) .GetChannel (); Inchannel.transferto (0, Inchannel.size (), Outchannel); Inchannel.close (); // shard -Datei löschen. if (tempFile.isdirectory () && tempFile.exists ()) {tempfile.delete ();} // Schließen Sie den Stream Outchannel.close ().setContentType ("text/html; charset = utf-8"); erfolgreich/"}");}Große Datei -Haltepunkte werden fortgesetzt
Basierend auf der Implementierung des Block -Uploads ist es sehr einfach, eine kontinuierliche Übertragung des Haltepunkts zu implementieren! ! !
Frontend:
// Zeitpunkt 2: Wenn Block -Upload vorliegt, wird diese Funktion vor jedem Block -Upload aufgerufen // Block: Repräsentiert das aktuelle Blockobjekt vor: Funktion (Block) {// 1. Fordern Sie an, ob der Hintergrund den aktuellen Block gespeichert hat. Wenn es vorhanden ist, überspringen Sie die Blockdatei, um die Breakpoint Continuous -Übertragungsfunktion zu realisieren. Wenn es gespeichert wurde, wird es übersprungen. Wenn dies nicht der Fall ist, wird der Chunk -Inhalt $ .ajax ({Typ: "post", url: "$ {pageContext.Request.ContextPath}/UploadCheckServlet? Action = Checkchunk", Data: {// Die Datei eindeutige Marke Filemd5: Filemd5, // Der aktuelle Chunk -Chunk -Chunk -Chunk -Chunk -Chunk -Chunk -Chunk -Chunk -Chunk -Chunk -Chunk -Chunk -Chunk -Chunk -Chunk -Chunk -Chunk -Chunk -Chunk -Chunk -Chunk -Chunk -Chunk -Chunk -Subscript: {//. lock.end-block.start},dataType:"json",success:function(response){if(response.ifExist){//The block exists, skip the block deferred.reject();}else{//The block does not exist or is incomplete, and resend the block content deferred.resolve();}}});//Carry the unique tag of the current file to the background, and let the Hintergrund erstellen Sie das Verzeichnis, das die Datei speichert. },Hinter der Bühne:
// Überprüfen Sie, ob der Chunk private void checkchunk (httpServletRequest -Anforderung, httpServletResponse -Antwort) existiert oder speichert, IOException, FileNotFoundException {System.out.println ("Checkchunk ..."); String Filemd5 = Anfrage. request.getParameter("chunkSize");File checkFile = new File(serverPath+"/"+fileMd5+"/"+chunk);response.setContentType("text/html;charset=utf-8");//Check whether the file exists and the size is consistent if(checkFile.exists() && checkFile.length()==Integer.parseInt(chunkSize)){response.getWriter().write("{/"ifExist/":1}");}else{response.getWriter().write("{/"ifExist/":0}");}}Dateiübertragung in Sekunden
Vor allen Blockanforderungen kann die zweite Übertragungsfunktion implementiert werden! ! !
Frontend:
BeforesendFile: Funktion (Datei) {// Erstellen Sie einen DefferedVar deferred = webUlader.Deferred (); // 1. Berechnen Sie die eindeutige Marke der Datei, die für die kontinuierliche Übertragung und die zweite Übertragung von Breakpoint verwendet wird. val; $ ("#"+file.id) .find ("Div.State"). $ .ajax ({type: "post", url: "$ {pageContext.request.contextPath}/UploadCheckServlet? Action = FileCheck", Daten: {// Das eindeutige Tag der Datei filemd5: fileMd5}, Datentyp: "JSON", Erfolg: Funktion (Antwort) {if (response.ifexist) {$ ("#"+file.id) .find ("Div.State"). Text ("erfolgreich übertragen"); aufgeschoben.resolve ();}}});}); // Rückgabe aufgeschobene aufgeschoben.Promise ();},,Hinter der Bühne:
// Überprüfen Sie, ob die MD5 -Daten der Datei mit der Datenbank private void filecheck (httpServletRequest -Anforderung, httpServletResponse -Antwort) in Bezug auf IOException, FileNotFoundException {String fileMd5 = request.getParameter ("FilEMD5") bezogen werden. HashMap <String, String> (); Datenbank.put ("576018603F4091782B68B78AF85704A1", "01. Kurs Review.itcast "); response.setContentType (" text/html; charSet = utf-8 "); if (Datenbank.Das obige Beispiel ist eine Beispiele für das Hochladen von Javaweb -Dateien und den Download, den der Editor Ihnen vorgestellt hat (Cool -Datei -Upload -Technologie). Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird allen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!