資訊專欄INFORMATION COLUMN
摘要：簡(jiǎn)介開發(fā)文件上傳功能從來不是一件愉快的事，異步上傳更是如此，使用過和的上傳方案，也都感覺十分的別扭。本文簡(jiǎn)要簡(jiǎn)紹利用的實(shí)現(xiàn)文件的異步上傳，還可以實(shí)現(xiàn)上傳進(jìn)度條和文件大小驗(yàn)證等。服務(wù)端使用的方案進(jìn)行處理。
1 簡(jiǎn)介
開發(fā)文件上傳功能從來不是一件愉快的事，異步上傳更是如此，使用過iframe和Flash的上傳方案，也都感覺十分的別扭。本文簡(jiǎn)要簡(jiǎn)紹利用Html5的FormData實(shí)現(xiàn)文件的異步上傳，還可以實(shí)現(xiàn)上傳進(jìn)度條和文件大小驗(yàn)證等。服務(wù)端使用springMVC的方案進(jìn)行處理。
2 Html代碼 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依賴
6.2 servlet-context.xmlcommons-io commons-io 2.5 commons-fileupload commons-fileupload 1.3.2
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+
8 推薦閱讀如果對(duì)上述方案不滿意，推薦使用如下的解決方案：
JQuery File Uploader
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/83093.html
摘要：前段時(shí)間面試過程中，頻繁遇到異步文件上傳的相關(guān)問題。所以，這會(huì)是一個(gè)拖放接口實(shí)現(xiàn)文件異步上傳的完整。監(jiān)聽放置元素的事件，通過對(duì)象可以獲得拖拽事件的狀態(tài)及數(shù)據(jù)。后端文件接收保存后端使用實(shí)現(xiàn)文件上傳。 ??前段時(shí)間面試過程中，頻繁遇到H5異步文件上傳的相關(guān)問題。還遇到過一個(gè)通過H5拖放功能實(shí)現(xiàn)文件異步上傳的問題，大概知道H5有新增拖拽功能可以接收文件，如何異步上傳文件就母雞了(攤手)。面試...
摘要：簡(jiǎn)介業(yè)務(wù)做一個(gè)在線投票，給歌手投票。提交到當(dāng)前頁面的中達(dá)到效果。用戶名密碼注冊(cè)總結(jié)在不使用對(duì)象的情況下，依然可以用來實(shí)現(xiàn)對(duì)后臺(tái)服務(wù)器的請(qǐng)求，同時(shí)不帶來頁面刷新或者跳轉(zhuǎn)。 ajax 簡(jiǎn)介 業(yè)務(wù)：做一個(gè)在線投票，給歌手投票。要求：無刷新，并且不允許使用XMLHttpRequest對(duì)象.分析:在XHR對(duì)象，沒有流行之前，已經(jīng)有了無刷新這種效果的方法. 從http角度看，可以利用204 No...
摘要：是一個(gè)極度純凈的上傳插件，通過簡(jiǎn)單調(diào)整就可以融入到任何項(xiàng)目，支持多文件上傳上傳速率動(dòng)態(tài)控制真實(shí)進(jìn)度監(jiān)控分塊生成分塊上傳校驗(yàn)秒傳暫停取消等。 跨域?qū)W習(xí)筆記 前言: 當(dāng)一個(gè)資源，向與之所在服務(wù)器不同的域或端口請(qǐng)求另一個(gè)資源時(shí)，這個(gè)HTTP請(qǐng)求，我們認(rèn)為是跨域的請(qǐng)求。出于安全考慮，瀏覽器會(huì)限制腳本發(fā)起的跨域HTTP請(qǐng)求。 那天后端讓我把token放到http請(qǐng)求頭字段里，說是為了和RN端統(tǒng)一...
摘要：以上傳圖片為例。我們可以通過獲取上傳的圖片相關(guān)信息，但是想要實(shí)現(xiàn)本地預(yù)覽還需要借助來實(shí)現(xiàn)可以讀取本地圖片，并將圖片數(shù)據(jù)轉(zhuǎn)換成編碼的字符串形式嵌入到頁面中。在我們實(shí)現(xiàn)上傳圖片的效果里，就有用到。圖片預(yù)覽兼容處理及以下版本不支持和。 最近項(xiàng)目里需要用到上傳圖片并預(yù)覽的功能，于是寫了個(gè)jQuery預(yù)覽圖片插件，下載地址。如果有需要的，可以直接下載。第一次寫jQuery插件，如有不對(duì)之處，歡迎...
閱讀 2778·2021-10-11 10:57
閱讀 1628·2021-09-26 09:55
閱讀 1350·2021-09-06 15:11
閱讀 3513·2021-08-26 14:16
閱讀 714·2019-08-30 15:54
閱讀 570·2019-08-30 12:43
閱讀 3345·2019-08-29 16:18
閱讀 2620·2019-08-23 16:14
