JQuery插件 Ajaxupload实现文件上传功能时无需创建form表单,就可以通过ajax的方式实现文件上传,功能丰富,可以设置上传之前、上传之后的动作,方便做一些处理工作。Ajaxupload可以实现上传文件时页面无刷新,当选择一个文件之后,就开始了上传动作,不会刷新或跳转页面。
使用Ajaxupload,需要下载jquery及Ajaxupload,然后在html页面中引入jquery及Ajaxupload。
下面通过一个例子说明Ajaxupload的使用方法。
首先创建一个html页面,然后创建div元素用来显示需要上传的文件输入区域,这里创建2个分别上传图片和zip文件,
<div id="upload-pic">
<label>图片:</label>
<input type="button" id="uploadImgBtn" name="uploadImgBtn" value="上传图片"/>
<label>请保证图片符合以下条件:1、小于2M 2、JPG、JPEG格式。</label>
</div>
<div id="upload-file">
<label> zip文件:</label>
<input type="button" id="uploadZipBtn" name="uploadZipBtn" value="上传zip文件"/>
<label>请保证文件符合以下条件:1、小于50M 2、zip格式。</label>
</div>
在js代码里设置上传方法:
var uploadBtn= $("#uploadImgBtn");
if(uploadBtn){
/* 上传图片 */
new AjaxUpload(uploadBtn, {
action: '/admin/app/photo',
data : {
'key1' : "key1",
'key2' : "key2",
'key3' : "key3"
},
name: 'mypic',
onSubmit : function(file , ext){
if (ext && /^(jpg|jpeg)$/.test(ext)){
uploadBtn.attr('value','上传中...');
} else {
alert("只允许上传图片(jpg格式)");
return false;
}
},
onComplete : function(fileName, data){
var rst = data.success;
if(rst=='true'){
uploadBtn.attr('value','上传成功');
}else{
uploadBtn.attr('value','上传失败');
}
}
});
}
action是提交到服务器端的地址,data中设置传到服务器端的属性值,name属性设置服务器端收到的文件名字,onSubmit是文件上传之前的操作,可以判断图片文件的格式,如果不符合要求,停止上传,onComplete是文件上传之后的操作,根据返回值可以判断文件上传成功与否,然后在页面上显示相应信息。
服务器端用java实现,结合springmvc框架,如下:
@RequestMapping(value = "photo", method = { RequestMethod.POST })
@ResponseBody
public String savePhoto(@RequestParam("mypic") MultipartFile file, @RequestParam("key1") String key1,
@RequestParam("key2") String key2, @RequestParam("key3") String key3) throws Exception {
JSONObject result = new JSONObject();
try {
if (file == null || file.isEmpty()) {
result.put("status", "empty_file");
} else {
if (file.getSize() > Constants.MAX_PIC_SIZE) {
result.put("status", "error");
result.put("message", "您上传的图片太大");
return result.toString();
}
//将文件保存到本地文件系统
logger.info("上传图片成功,保存到");
result.put("success", "true");
return result.toString();
}
} catch (Exception e) {
result.put("status", "error");
logger.error(e, e);
return result.toString();
}
}
在服务器端可以进一步检查文件类型、大小等,符合要求可以保存到本地,返回成功标准,否则返回失败。