使用JQuery插件 Ajaxupload实现文件上传
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();
}
}
在服务器端可以进一步检查文件类型、大小等，符合要求可以保存到本地，返回成功标准，否则返回失败。
