功能上传

需求:同时上传多张图片

前端: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表单数据,当然包括图片。 更新:多次提交,普通表单数据的提交/数据文件的提交。

最新文章

  1. C# 文件压缩加解密
  2. c++ 泛型编程及模板学习
  3. PHP DES 加解密
  4. 把C编译成javascript的方法
  5. WPF自定义控件(三)——Window
  6. 转:对于linux下system()函数的深度理解(整理)
  7. hdu 1217 利用flord算法求 有环图 2点之间最大值
  8. Unity3d 网络编程(三)(Unity3d内置简单的网络server编制)
  9. ansible学习基础知识和模块(一)
  10. 【Python】函数总结
  11. springboot项目打包部署在指定的tomcat容器中
  12. Writing Custom Providers
  13. javascript学习笔记(六):对象、内置对象
  14. 转载 为什么print在Python 3中变成了函数?
  15. fzu 2139 久违的月赛之二
  16. 反射中的 Class.forName() 与 ClassLoader.loadClass() 的区别
  17. String类的substring方法
  18. HTTP Header User-Agent的ctf
  19. Swift 修改UITextField.Placeholder颜色
  20. MySQL workbench中的PK,NN,UQ,BIN,UN,ZF,AI说明

热门文章

  1. python解无忧公主数学题108
  2. Android MotionEvent getX() getY() getRawX() getRawY() and View getTop() getLeft()
  3. leetcode 229 Majority Element II
  4. 封装定制的Kali Live ISO
  5. 解决:信息中插入avi格式的视频时,提示“unsupported video format”
  6. 黑马程序员——【Java基础】——面向对象(二)异常机制、包(Package)
  7. BZOJ 2296 随机种子
  8. DB Create and Insert
  9. HDU 4405
  10. Web应用开发工具及语言需要具备的功能探索