图片上传,一次性可以上传多个图片,每个图片可以有名字、URL、排序、备注等字段。
这是区别于使用百度WebUploader等多图上传工具的地方。

项目相关图片

Jar包管理:Maven

用到的框架:SpringMVC、Spring、Mybatis、Freemarker、Log4j等

入口文件:web.xml

配置Spring的DispatcherServlet和SpringMybatis整合的spring-mybatis.xml。

Controller有2个:
IndexController:图片查看viewPhoto,图片管理managePhoto
ImageUploader:响应图片上传请求

前端图片上传,使用的是ajax异步上传,jquery ajax,需要引入jquery库。

整个项目的要点就是:
前端JS绑定各种事件,动态生成HTML,控制好变量的维护和提交。
后端Java执行保存、查看,从数据库获得数据,维护数据。

图片Photo表的结构
CREATE TABLE `photo` (
  `id` bigint(10) unsigned NOT NULL AUTO_INCREMENT,
  `bizid` bigint(11) NOT NULL DEFAULT '-1' COMMENT '业务id,比如项目的id',
  `cover` int(11) DEFAULT '0' COMMENT '1:是,0:不是',
  `sort` int(11) DEFAULT '0' COMMENT '越小越靠前',
  `url` varchar(200) DEFAULT NULL,
  `name` varchar(255) DEFAULT NULL COMMENT '图片的原文件名',
  `remark` varchar(255) DEFAULT NULL COMMENT '图片备注',
  `status` int(11) DEFAULT '0' COMMENT '0:正常,1:已删除,2:临时的',
  `type` int(11) DEFAULT '1' COMMENT '1:项目资料 2:待续',
  `addtime` datetime DEFAULT NULL,
  `uptime` datetime DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=184 DEFAULT CHARSET=utf8 COMMENT='用户上传的图片';

需要特别说明的是,由于代码是从其它项目裁剪过来的,部分代码看起来有点多余,有点别扭。
有需要的,自行改造~目前图片文件,存储在本地项目/WebContent/image目录,
由于需要,未来可能会增加存储到Fastdfs的接口。

可能存在bug哦~

项目源码地址:https://git.oschina.net/fansunion/ManyImageUploadDemo.git

小雷FansUnion
2015年11月3日
湖北-武汉-循礼门
QQ:240370818
微信:FansUnion

图片上传5-多个图片上传,独立项目Demo和源码的更多相关文章

  1. 在CentOS 7上安装Node.js的4种方法(yum安装和源码安装)

    CentOS 7上的安装方法,其中涵盖了源码安装,已编译版本安装,EPEL(Extra Packages for Enterprise Linux)安装和通过NVM(Node version mana ...

  2. hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...

  3. 【转】asp.net(c#)使用HttpWebRequest附加携带请求参数以post方式模拟上传大文件(以图片为例)到Web服务器端

    原文地址:http://docode.top/Article/Detail/10002 目录: 1.Http协议上传文件(以图片为例)请求报文体内容格式 2.完整版HttpWebRequest模拟上传 ...

  4. 从web编辑器 UEditor 中单独提取图片上传,包含多图片单图片上传以及在线涂鸦功能

    UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.(抄的...) UEditor是非常好用的富文 ...

  5. 微信JSSDK多图片上传并且解决IOS系统上传一直加载的问题

    微信多图片上传必须挨个上传,也就是不能并行,得串行: 那么我们可以定义一个如下所示的上传函数: var serverIds = []; function uploadImages(localImage ...

  6. php用jquery-ajax上传多张图片限制图片大小

    php用jquery-ajax上传多张图片限制图片大小 /** * 上传图片,默认大小限制为3M * @param String $fileInputName * @param number $siz ...

  7. 适用于各浏览器支持图片预览,无刷新异步上传js插件

    文件上传无疑是web应用中一个非常常用的功能,不管是PHP.jsp还是aspx.mvc等都会需要文件上传,但是众所周知当使用自带的文件上传功能时总会出现页面刷新的情况.当然现在有了html5这个好东西 ...

  8. [上传下载] C# ImageUpload图片上传类教程与源码下载 (转载)

    点击下载 ImageUpload.zip 功能如下图片1.设置属性后上传图片,用法如下 /// <summary> /// 图片上传类 /// </summary> //--- ...

  9. MVC下form表单一次上传多种类型的图片(每种类型的图片可以上传多张)

    form表单一次上传多种类型的图片(每种类型的图片可以上传多张) controller中的action方法 public ActionResult UploadImage( )        { in ...

随机推荐

  1. SPOJ8222 NSUBSTR - Substrings 后缀自动机_动态规划

    讲起来不是特别好讲.总之,如果 $dp[i+1]>=dp[i]$,故$dp[i]=max(dp[i],dp[i+1])$ Code: #include <cstdio> #inclu ...

  2. CodeForcesEducationalRound40-D Fight Against Traffic 最短路

    题目链接:http://codeforces.com/contest/954/problem/D 题意 给出n个顶点,m条边,一个起点编号s,一个终点编号t 现准备在这n个顶点中多加一条边,使得st之 ...

  3. HNU 12886 Cracking the Safe 二十四点的判断

    经典的一个题,今天竟然写跪了…… 题意: 给你4个数字,让你判断是否能通过四则运算和括号,凑成24点. 思路: 暴力枚举运算顺序和运算符. 代码: #include <iostream> ...

  4. Unity C# 设计模式(三)工厂方法模式

    定义: 定义一个创建对象的接口(父类),由子类决定需要实例化哪一个类. 这样,核心工厂类成为了一个抽象角色,不再负责产品的创建,仅提供具体工厂类所必须实现的接口,这样进一步抽象化的好处是使得工厂方法模 ...

  5. 【转】 java RSA加密解密实现

    [转] java RSA加密解密实现 该工具类中用到了BASE64,需要借助第三方类库:javabase64-1.3.1.jar 下载地址:http://download.csdn.net/detai ...

  6. hdu 1423 最长公共递增子序列 LCIS

    最长公共上升子序列(LCIS)的O(n^2)算法 预备知识:动态规划的基本思想,LCS,LIS. 问题:字符串a,字符串b,求a和b的LCIS(最长公共上升子序列). 首先我们可以看到,这个问题具有相 ...

  7. C. Diverse Permutation(Codeforces Round #275(div2)

    C. Diverse Permutation time limit per test 1 second memory limit per test 256 megabytes input standa ...

  8. linux大于2T的磁盘使用GPT分区的方法分享

    (parted)表示在parted中输入的命令,其他为自动打印的信息 1.首先类似fdisk一样,先选择要分区的硬盘,此处为/dev/sdb ey: parted /dev/sdb 2.选择了/dev ...

  9. BZOJ 1579 道路升级 Dijkstra

    思路: 这道题 不能把所有边都建出来 会MLE的!!! oh gosh 其实不建所有的边 用的时候再调就行了-.(也没啥区别) //By SiriusRen #include <queue> ...

  10. Linux企业应用--RHAS 2.1 下安装中文 Lotus Domino R 6.5 图解

    原文请到ftp.jms165.com下载,是用上传用户                                                 (RHAS3+ksnapshot+OperOff ...