功能上传
需求：同时上传多张图片
前端：jquery.ajaxfileupload.js
后端：jfinal
upload.htm
<html>
<body>
<div class="form-element-file-wapper">
<button type="button">上传照片</button>
<input type="file" id="image0" name="image" accept="image/jpeg,image/png,image/gif">
</div>
<script>
//绑定6个按钮控件
$(document).ready(function(){
var arr = [0,1,2,3,4,5];
$(arr).each(function(index,element){
$("#image0").ajaxfileupload({
'action': '/upload/uploadImage',
'onComplete': function(data) {
var html ="";
html += "<img alt='' src='"+data.filepath+"'>";
var name = "img"+$.trim(index);
html += "<input type='hidden' name="+name+" value='"+data.filepath+"'>";
$("#img"+index).html(html);
},
'onStart': function() {
},
'onCancel': function() {
},
valid_extensions:['jpeg','png','gif','jpg']
});
});
});
</script>
</html>
</body>
一、新增
Upload.java
public void uploadImage(){
UUID uuid = UUID.randomUUID();
String sysPath = getSession().getServletContext().getRealPath("");
File tempFile = new File(sysPath+"/upload/temp/");
if(!tempFile.exists()){
tempFile.mkdirs();
}
UploadFile upfile = getFile("image");
if(upfile != null){
File file = upfile.getFile();
String fileName = uuid+"_"+file.getName();
String filepath = "/upload/temp/"+fileName;
file.renameTo(new File(sysPath+filepath));
setAttr("filepath", filepath); //返回文件存放临时路径给前台
}
renderJson();
}
//保存文件和做相关业务
public void saveUploadImage(String filepath[],Business business){
String sysPath = getSession().getServletContext().getRealPath("");
File savepath = new File(sysPath+"/upload/image/");
if(!savepath.exists()){
savepath.mkdirs();
}
for(int i=0;i<filepath.length;i++){
File file = new File(sysPath+filepath[i]);
if(!file.exists()){
continue;
}
file.renameTo(new File(savepath+File.separator+file.getName()));
System.out.println(new File(savepath+File.separator+file.getName()).getAbsolutePath());
business.set("id","business_seq.nextval");
//其它字段...
business.set("head_img"+(i+1), "/upload/image/"+file.getName());
business.save();
}
}
二、更新
public void UpdateUploadImage(){
UUID uuid = UUID.randomUUID();
String sysPath = getSession().getServletContext().getRealPath("");
File savepath = new File(sysPath+"/upload/image/");
if(!savepath.exists()){
savepath.mkdirs();
}
UploadFile upfile = getFile("image");
if(upfile == null){
return;
}
Integer seq = getParaToInt("seq")+1;
Long businessId = getParaToLong("businessId");
//删除原来文件
Record record = BusinessService.findById(businessId);
String head_img = record.get("head_img"+seq);
if(head_img!=null && !"".equals(head_img)){
File f = new File(sysPath+head_img);
if(f.exists()){
f.delete();
}
}
//保存新文件路径
File file = upfile.getFile();
String fileName = uuid+"_"+file.getName();
String filepath = "/upload/student_store_image/"+fileName;
file.renameTo(new File(sysPath+filepath));
//更新数据库
Business business= new Business();
business.set("id", studentStoreId);
business.set("head_img"+seq, filepath);
business.update();
setAttr("filepath", filepath);
renderJson();
}
注释：
1、新增业务：先把图片存放在服务器的临时目录，待用户所有资料填完点击提交。保存资料和一次保存6张图片。
2、更新业务：直接保存图片到服务器目录，而且更新数据库记录，记录图片的目录位置。
3、新增：一次性提交所有form表单数据，当然包括图片。 更新：多次提交，普通表单数据的提交/数据文件的提交。