HTML5 -Implementierungsdatei Asynchrone Upload -Funktion

Die Upload -Funktion der Entwicklungsdatei war noch nie eine angenehme Sache, und für den Upload von asynchronen Uploads ist es noch mehr. In diesem Artikel wird kurz die FormData von HTML5 verwendet, um das asynchrone Upload von Dateien zu implementieren, und kann auch Upload -Einstiegsleisten und Überprüfung der Dateigröße erreichen. Der Server verwendet das SpringMVC -Schema zur Verarbeitung.

 <Form id = myForm> <Eingabe type = Datei id = u_photo name = u_photo/> <Eingabe type = Taste = Subjekt-BTN VALUE = Upload/> </Form>

 $ (#Subjektbtn) .on ('klick', function () {$ .ajax ({url:/test/upload, type: post, data: new FormData ($ (#myForm) .get (0)) , // Es ist sehr wichtig.

Die Kontrolle der Dateigröße und des entsprechenden Verhaltens muss nach Bedarf von selbst verarbeitet werden.

 $ ('#U_PHOTO'). }}});

Fügen Sie der AJAX -Methode XHR hinzu, um den Upload -Fortschritt zu steuern. Das Zeigen und versteckte Fortschrittsbalken müssen selbst verarbeitet werden.

 Xhr: function () {var myxhr = $ .ajaxSettings.xhr (); .Attr ({value: e.Loded, max: e.total,});}}, false);} return myxhr;}

 <Depopentcy> <gruppe> commons-io </GroupId> <artifactId> commons-io </artifactId> <version> </Version> </abhängig> <gruppe> commons-FileUpload </Groupid> <artTifactid> commons-fileUpload </Artifactid> <version> 1.3.2 </Version> </abhängig>

 <bean id = multipartresolver class = org.springframework.web.multipart.commonsMonsMultipresolver />

Das Beispielprogramm gibt den entsprechenden Code nicht zur Überprüfung, Speicherung und Verarbeitung von Dateien an.

 @RequestMapping (value =/test/upload, method = requestMethod.post) @ResponseBodypublic String Upload (@RequestParam (u_photo) MultiPartFile _photo) {System.out.println (u_photo =+u_photo.getSIZE ();

Dh 10+, Firefox 4.0+, Chrome 7+, Safari 5+, Opera 12+

Wenn Sie mit dem obigen Plan nicht zufrieden sind, wird empfohlen, die folgenden Lösungen zu verwenden:

JQuery -Datei -Uploader

Das oben genannte ist die von XIAOBIAN vorgestellte HTML5 -Implementierungsdatei der HTML5 -Implementierungsdatei. Vielen Dank für Ihre Unterstützung für die VEVB Wulin -Website!