Home >Web Front-end >JS Tutorial >Using jquery.upload.js to implement asynchronous upload sample code_jquery

Using jquery.upload.js to implement asynchronous upload sample code_jquery

WBOY
WBOYOriginal
2016-05-16 16:40:521265browse

Related resource download: upload

1:jsp code:

Import jquery.upload.js and jquery-1.7.2.js

Add the code to call js: b9b18ff287dc53c6e6b7bd209e777db6Upload5db79b134e9f6b82c0b36e0489ee08ed

Write at the bottom:

<iframe style="position:absolute;top:-9999px" src="<%=basePath%>/resources/upload/upload.htm"/></iframe>

2: js code:

/*文件上传*/
function doUpload() {
// 上传方法
$.upload({
// 上传地址
url:window.basePath+'/reply/imageUpload', 
// 文件域名字
fileName: 'uploadfile', 
// 其他表单数据
params: {},
// 上传完成后, 返回json, text
dataType: 'json',
// 上传之前回调,return true表示可继续上传
onSend: function() {
return true;
},
onSubmit: function(){
},
// 上传之后回调
onComplate: function(data) {
if(data.msg){

}else{
alert("上传图片出错!");
}
}
});
}

3: Backend code:

/**
* 图片上传本地服务器
* @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;
}
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn