您好,登錄后才能下訂單哦!
今天就跟大家聊聊有關(guān)如何利用Html5實(shí)現(xiàn)文件異步上傳的功能,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
1 簡(jiǎn)介
開(kāi)發(fā)文件上傳功能從來(lái)不是一件愉快的事,異步上傳更是如此,使用過(guò)iframe和Flash的上傳方案,也都感覺(jué)十分的別扭。本文簡(jiǎn)要簡(jiǎn)紹利用Html5的FormData實(shí)現(xiàn)文件的異步上傳,還可以實(shí)現(xiàn)上傳進(jìn)度條和文件大小驗(yàn)證等。服務(wù)端使用springMVC的方案進(jìn)行處理。
2 Html代碼
<form id="myForm"> <input type="file" id="u_photo" name="u_photo" /> <input type="button" id="submit-btn" value="上傳" /> </form>
3 JQuery上傳
$("#submit-btn").on('click', function() { $.ajax({ url:"/test/upload", type:"post", data:new FormData($("#myForm").get(0)), //十分重要,不能省略 cache: false, processData: false, contentType: false, success: function () { alert("上傳成功!"); } }); });
4 JQuery文件大小驗(yàn)證
文件大小的及相應(yīng)行為的控制,需根據(jù)需要自行處理,本方法只是示例方法。
$('#u_photo').on('change', function() { var file = this.files[0]; if (file.size > 1024*1000) { alert('文件最大1M!') } });
5 JQuery進(jìn)度條
在ajax方法中加入xhr即可控制上傳進(jìn)度,進(jìn)度條可以使用html5的progress也可使用其它的進(jìn)度條。顯示及隱藏進(jìn)度條需要自行處理,本方法只是簡(jiǎn)單介紹了進(jìn)度條的基本控制。
xhr: function() { var myXhr = $.ajaxSettings.xhr(); if (myXhr.upload) { myXhr.upload.addEventListener('progress', function(e) { if (e.lengthComputable) { $('progress').attr({ value: e.loaded, max: e.total, }); } } , false); } return myXhr; }
6 springMVC服務(wù)端
6.1 maven依賴
<dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.5</version> </dependency> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.2</version> </dependency>
6.2 servlet-context.xml
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" />
6.3 Controller
示例程序,并未給出文件驗(yàn)證,存儲(chǔ)及處理的相應(yīng)代碼。
@RequestMapping(value="/test/upload",method = RequestMethod.POST) @ResponseBody public String upload(@RequestParam("u_photo") MultipartFile u_photo) { System.out.println("u_photo="+u_photo.getSize()); return "ok"; }
7 兼容性
IE 10+, Firefox 4.0+, Chrome 7+, Safari 5+, Opera 12+
看完上述內(nèi)容,你們對(duì)如何利用Html5實(shí)現(xiàn)文件異步上傳的功能有進(jìn)一步的了解嗎?如果還想了解更多知識(shí)或者相關(guān)內(nèi)容,請(qǐng)關(guān)注億速云行業(yè)資訊頻道,感謝大家的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。