File Implementasi HTML5 Fungsi Unggah Asynchronous

Fungsi unggahan dari file pengembangan tidak pernah menjadi hal yang menyenangkan, dan bahkan lebih untuk mengunggah unggahan asinkron. Artikel ini secara singkat menggunakan formdata HTML5 untuk mengimplementasikan unggahan file asinkron, dan juga dapat mencapai bilah entri unggahan dan verifikasi ukuran file. Server menggunakan skema SpringMVC untuk diproses.

 <Form id = myForm> <input type = file id = u_photo name = u_photo/> <input type = tombol id = kirim-btn nilai = unggah/> </form>

 $ (#Kirim-btn) .on ('klik', fungsi () {$ .Ajax ({url:/test/unggah, ketik: post, data: formdata baru ($ (#myform) .get (0)) , // Ini sangat penting.

Kontrol ukuran file dan perilaku yang sesuai perlu diproses dengan sendirinya sesuai kebutuhan.

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

Tambahkan XHR ke metode AJAX untuk mengontrol kemajuan unggahan. Menampilkan dan Bilah Kemajuan Tersembunyi perlu diproses dengan sendirinya.

 Xhr: function () {var myxhr = $ .AjaxSettings.xhr (); .attr ({value: e.Loaded, max: e.total,});}}, false);} return myxhr;}

 <dependency> <GroupId> commons-io </groupid> <ArTifactId> commons-io </artifactid> <version> </version> </dependency> <groupid> commons- fileupload </groupid> <ArttifactId> commons-fileupload </Artifactid> <version> 1.3.2 </version> </dependency>

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

Contoh program tidak memberikan kode yang sesuai untuk verifikasi file, penyimpanan, dan pemrosesan.

 @RequestMapping (value =/test/unggah, metode = requestMethod.post) @ResponseBodyPublic string unggah (@RequestParam (u_photo) multipartfile _photo) {System.out.println (u_photo =+u_photo.getsize ());

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

Jika Anda tidak puas dengan rencana di atas, disarankan untuk menggunakan solusi berikut:

Pengunggah file jQuery

Di atas adalah fungsi unggahan asinkron dari file implementasi HTML5 yang diperkenalkan oleh Xiaobian. Terima kasih banyak atas dukungan Anda untuk situs web VEVB Wulin!