使用jquery.upload.js實現(xiàn)異步上傳示例代碼
更新時間：2014年07月29日 17:34:05 投稿：whsnow
這篇文章主要介紹了使用jquery.upload.js實現(xiàn)異步上傳的示例代碼,需要的朋友可以參考下
相關資源下載：upload
1:jsp代碼：
導入jquery.upload.js和jquery-1.7.2.js
添加調(diào)用js的代碼：<a href="javascript:void(0)" rel="external nofollow" onclick="doUpload()">上傳</a>
在底部寫：
<iframe style="position:absolute;top:-9999px" src="<%=basePath%>/resources/upload/upload.htm"/></iframe>
2：js代碼：
/*文件上傳*/
function doUpload() {
// 上傳方法
$.upload({
// 上傳地址
url:window.basePath+'/reply/imageUpload',
// 文件域名字
fileName: 'uploadfile',
// 其他表單數(shù)據(jù)
params: {},
// 上傳完成后, 返回json, text
dataType: 'json',
// 上傳之前回調(diào),return true表示可繼續(xù)上傳
onSend: function() {
return true;
},
onSubmit: function(){
},
// 上傳之后回調(diào)
onComplate: function(data) {
if(data.msg){
}else{
alert("上傳圖片出錯！");
}
}
});
}
3：后臺代碼：
/**
* 圖片上傳本地服務器
* @param request
* @param response
* @return
*/
@RequestMapping(value="imageUpload")
@ResponseBody
public Object imageUpload(HttpServletRequest request,HttpServletResponse response){
Map<String, Object> map=new HashMap<String, Object>();
UploadUtil uploadUtil = new UploadUtil();
try {
String url = uploadUtil.excelUpload(request, response);// 文件上傳
} catch (IOException e) {
e.printStackTrace();
}
return map;
}
您可能感興趣的文章:
- Jquery插件之多圖片異步上傳
- jquery的ajaxSubmit()異步上傳圖片并保存表單數(shù)據(jù)演示代碼
- jquery實現(xiàn)兼容IE8的異步上傳文件
- jQuery實現(xiàn)jQuery-form.js實現(xiàn)異步上傳文件
- jQuery插件ajaxFileUpload異步上傳文件
- jquery之a(chǎn)jaxfileupload異步上傳插件(附工程代碼)
- jQuery異步上傳文件插件ajaxFileUpload詳細介紹
- asp.net+jquery.form實現(xiàn)圖片異步上傳的方法(附jquery.form.js下載)
- jquery uploadify和apache Fileupload實現(xiàn)異步上傳文件示例
- jQuery實現(xiàn)異步上傳一個或多個文件
相關文章
animate動畫示例(淚奔的小孩)及stop和delay的使用
實現(xiàn)原理：停止動畫，當一個元素有一個動畫隊列時，停止的是當前動畫，緊接著執(zhí)行下一個動畫，具體代碼如下，感興趣的朋友可以參考下哈，希望對你學習jquery動畫有所幫助2013-05-05
下面小編就為大家?guī)硪黄钊肜斫釰Query循環(huán)綁定事件。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
這幾天在做一個交互的原型，第一次大量采用jQueryUI，確實非常方便好用，其中一些功能點用到了彈出確認提示框，看了jQueryUI Dialog的例子，效果還不錯，就是用起來有點兒別扭2010-06-06
這篇文章主要介紹了showModelDialog彈出文件下載窗口的使用示例，方法很簡單，大家可以直接參考下面的代碼使用2013-11-11
jQuery dateRangePicker插件使用方法詳解
這篇文章主要為大家詳細介紹了jQuery dateRangePicker插件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
jsTree(JQuery) 排序節(jié)點 Bug的解決方法。2011-07-07
使用微信內(nèi)置瀏覽器點擊下拉框出現(xiàn)頁面亂跳轉(zhuǎn)現(xiàn)象（iphone），該怎么辦
這篇文章主要介紹了使用微信內(nèi)置瀏覽器點擊下拉框出現(xiàn)頁面亂跳轉(zhuǎn)現(xiàn)象（iphone），該怎么辦的相關資料,需要的朋友可以參考下2016-01-01
這篇文章主要介紹了jQuery控制的不同方向的滑動(向左、向右滑動等),需要的朋友可以參考下2014-07-07
本篇文章給大家詳細分析了用jquery實現(xiàn)放大鏡效果的方法，以及代碼分享，有興趣的學習下。2018-02-02
ASP.NET jQuery 實例14 在ASP.NET form中校驗時間范圍
這節(jié)主要講如何用jQuery校驗表單時間范圍，時間控件用到了jQuery-ui2012-02-02