1 簡介
開發文件上傳功能從來不是一件愉快的事，異步上傳更是如此，使用過iframe和Flash的上傳方案，也都感覺十分的彆扭。本文簡要簡紹利用Html5的FormData實現文件的異步上傳，還可以實現上傳進度條和文件大小驗證等。服務端使用springMVC的方案進行處理。
2 Html代碼
<form id="myForm">
3 JQuery上傳
$("#submit-btn").on('click', function() {4 JQuery文件大小驗證
文件大小的及相應行為的控制，需根據需要自行處理，本方法只是示例方法。
$('#u_photo').on('change', function() { var file = this.files[0]; if (file.size > 1024*1000) {5 JQuery進度條
在ajax方法中加入xhr即可控制上傳進度，進度條可以使用html5的 progress 也可使用其它的進度條。顯示及隱藏進度條需要自行處理，本方法只是簡單介紹了進度條的基本控制。
xhr: function() { var myXhr = $.ajaxSettings.xhr(); if (myXhr.upload) {6 springMVC服務端
6.1 maven依賴
<dependency>
6.2 servlet-context.xml
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" />
6.3 Controller
示例程序，並未給出文件驗證，存儲及處理的相應代碼。
@RequestMapping(value="/test/upload",method = RequestMethod.POST)@ResponseBodypublic String upload(@RequestParam("u_photo") MultipartFile u_photo) {7 兼容性
IE 10+, Firefox 4.0+, Chrome 7+, Safari 5+, Opera 12+
8 推薦閱讀
如果對上述方案不滿意，推薦使用如下的解決方案：
JQuery File Uploader
想了解更多IT知識，更多就業知識可關注：
優就業官網：http://www.ujiuye.com/
優就業就業促進計劃：http://www.ujiuye.com/zt/jycj/?wt.bd=zy35844
在線視頻學習：http://xue.ujiuye.com/
相關推薦
'springBoot集成webSocket實現簡單聊天'
"在開始之前也是老套路為啥要集成websocket呢？肯定是有需求就會有市場，現在的項目中都會有消息提醒的機制，比如某個人審批了，另一個人要能實時接收到通知，再比如手機上app的消息推送等，這些需求呢傳統的方式也可以實現比如寫輪詢服務器某個接口代碼，每隔多少秒查詢一次，也可...
'PDF文件的密碼怎麼解除？'
"現在遇到一些不懂不明白的事情，我們首先都會在網上搜索答案。有時候找到的資料或者需要下載一些文件都會碰到加密的PDF文件，其中很多還不能打開查看或者編輯的權限，因此產生了很多麻煩。那有沒有什麼可以解決呢？我們又應該怎樣解決呢？其實解決的辦法也簡單,我們只需要通過文件轉換器把...
'功能強大的 JS 文件上傳庫：FilePond'
"作者：HelloGitHub-kalifun這是 HelloGitHub 推出的《講解開源項目》[1]系列，今天給大家推薦一個 JavaScript 開源的文件上傳庫項目——FilePond一、介紹 1.1 FilePond它是一個 JavaScript 文件上傳庫。可以...
'2小時完成HTML5拼圖小遊戲'
"當時初學遊戲開發，經驗淺薄，所以沒有好好專研遊戲裡的算法和代碼的缺陷，導致遊戲出現了很多bug，甚至拼圖打亂後很可能無法復原。最近經常有朋友問起這個遊戲，希望我能把代碼裡的bug改一下方便初學者學習，順便我也打算測試一下自己寫這種小遊戲的速度，所以就抽出了一些時間將這個遊...
'華為EMUI10破安卓界限實現雙系統操作 高通驍龍865現身GeekBench'
"本文出自NicolasLeeFreud，未經授權請勿轉載。 請勿將文章用於商業用途，否則作者有權追究一切版權法律責任。作者：NicolasLeeFreud圖片源自推特簡體中文版：華為自主研發“鴻蒙”系統震撼亮相，該系統將突破傳統微軟與安卓雙邊界限，實現雙系統同屏操作。華為...
'前端學習隨筆15 利用js實現九九乘法表'
"前沿：次隨筆對應的是第十七天到第十八天的學習任務今天的任務：練習使用循環實現一個九九乘法表第一步，最低要求：在Console中按行輸出 n * m = t然後，嘗試在網頁中，使用table來實現一個九九乘法表一、實現方法第一步很簡單，我們只需要使用循環嵌套即可實現，具體代...
HTML
2019-08-10
'使用ECharts框架實現圖形化報表展示'
"在這個大數據越來越盛行的年代，越來越多的使用圖表的形式來進行數據統計的展示，如折線圖、柱狀圖、散點圖、餅圖、K線圖，盒形圖， 地圖、熱力圖、線圖等等；如果在以前，要實現這些圖表，可能很多人會選擇flash。但是flash開發難度大，成本較高，圖表多的時候很耗性能。後來越來...
'登錄案例java實現 ---- Java進階篇'
"登錄案例java實現 ---- Java進階篇目錄一、環境搭建二、目錄結構三、代碼示例3.1、fail.html頁面3.2、Login.htm頁面3.3、IndexServlet.java3.4、LoginServlet.java3.5、LogoutServlet.jav...
'與HTML5大前端有關的事半功倍學習方法'
"現在是一個追求效率的時代，因為時間對於任何一個人來說都很寶貴，如何在有限的時間裡高質量、高效率完成我們自己設定的目標，已經成為越來越多人關注的問題。對於HTML5大前端的學員而言，事半功倍的學習方法也是他們一直追求的事情。千鋒重慶校區老師根據多年授課經驗，總結了以下幾點學...
推薦中...