功能上传

需求：同时上传多张图片

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

java jfinal + ajaxfileupload.js 上传的更多相关文章

  1. 使用ajaxfileupload.js上传文件

    一直以来上传文件都是使用form表单上传文件,也看到过有人使用js上传文件,不过看起来蛮简单的也就没有怎么去理会.今天突然要使用这种方式上传文件,期间还遇到点问题.因此就记录下来,方便以后遇到这样的问 ...

  2. ajaxfileupload.js上传文件兼容IE7及以上版本

    要兼容IE789,要修改ajaxfileupload.js;要将此处的代码替换掉 if(window.ActiveXObject) { var io = document.createElement( ...

  3. jquery插件--ajaxfileupload.js上传文件原理分析

    英文注解应该是原作者写的吧~说实话,有些if判断里的东西我也没太弄明白,但是大致思路还是OK的. jQuery.extend({ createUploadIframe: function (id, u ...

  4. 【转】JQuery插件ajaxFileUpload 异步上传文件（PHP版）

    前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现a ...

  5. js 上传下载(留着备用)

      js 上传下载(留着备用) 下载文件 1. <a href="#" onClick="download()">下载文件</a>  & ...

  6. js上传文件带参数，并且，返回给前台文件路径，解析上传的xml文件，存储到数据库中

    ajaxfileupload.js jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId ...

  7. JQuery插件ajaxFileUpload 异步上传文件（PHP版）

    太久没写博客了,真的是太忙了.善于总结,进步才会更快啊.不多说,直接进入主题. 前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错 ...

  8. MVC+AjaxFileUpload文件上传

    来源:微信公众号CodeL 本次给大家分享的是ajaxfileupload文件上传插件,百度一大堆功能超炫的文件上传插件,为什么我们会选择这个插件呢? 原因是在此之前,我们尝试使用过很多基于flash ...

  9. 【原创】用JAVA实现大文件上传及显示进度信息

    用JAVA实现大文件上传及显示进度信息 ---解析HTTP MultiPart协议 (本文提供全部源码下载,请访问 https://github.com/grayprince/UploadBigFil ...

随机推荐

  1. joinfetch之意义

    既然被join的对象早晚都要用到,为什么要先从A表取这边的独享,再根据关联关系取B表中的对象,分两次或者多次进行,增加数据库的负载呢? 为什么不把A表和B表join成一张表,从这个组合表中把要取的对象 ...

  2. 系统的 host文件的作用

    有些用户可能已经注意到,我们在上网时除了可使用常规的 http://www.xxx.com或http://www.xxx.com.cn等形式的网站域名之外,还可以使用类似于“202.106.184.2 ...

  3. 微软TechEd2013大会门票热卖！

    微软TechEd2013大会将在北京.上海两地隆重举行! 会议时间安排如下: 北京:12月5日—6日  国家会议中心 上海:12月11日—12日  国际会议中心 现在是门票热卖时期,票价:2688.0 ...

  4. 按Right-BICEP要求的任务二的测试

    测试方法:Right-BICEP 测试计划: 1.Right-结果是否正确? 2.B-是否所有的边界条件都是正确的? 3.P-是否满足性能要求? 4.是否有乘除法? 5.是否有括号? 6.是否有输出方 ...

  5. 解决：未找到setenv命令

    在Ubuntu12.04中配置python环境变量:setenv PATH "$PATH:/usr/local/bin/python",提示未找到setenv命令. 为什么呢?这是 ...

  6. Monogb基本概念及基本操作

    MongoDB是面向文档的数据库. 索引:MongoDB支持通用辅助索引,能进行多种快速查询,也提供唯一的.复合的和地理空间索引能力. 存储JavaScript:开发人员不必使用存储过程了,可以直接在 ...

  7. C++之创建对象时的new与不new

    C++在创建对象的时候可以采用两种方式:(例如类名为Test) Test test  或者 Test* pTest = new Test(). 这两种方法都可以实例化一个对象,但是这两种方法有很大的区 ...

  8. [转]Golang之struct类型

    http://blog.chinaunix.net/xmlrpc.php?r=blog/article&uid=22312037&id=3756923 一.struct        ...

  9. 单元测试-代码覆盖率工具 -- JaCoCo

    最近学习Mybatis的官方文档,看到了[项目文档]一节有很多内容没有见过,做个笔记,理解一下. 随着敏捷开发的流行,编写单元测试已经成为业界共识.但如何来衡量单元测试的质量呢?有些管理者片面追求单元 ...

  10. 博客引索 - imsoft.cnblogs

    Java C Delphi 日常工具 图片处理 视频处理 系统工具 知识经验 奇思妙想 网站推荐