图片上传,一次性可以上传多个图片,每个图片可以有名字、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. MySQL 大数据量文本插入

    导入几万条数据需要等好几分钟的朋友来围观一下! 百万条数据插入,只在一瞬间.呵呵夸张,夸张!! 不到半分钟是真的! 插入指令: load data infile 'c:/wamp/tmp/Data_O ...

  2. MFC打包生成可安装文件

    一.问题来源: VS环境:编写的MFC程序即使静态联编之后,在客户机器上还是打不开.可能的原因是你开发的时候调用了第三方ActiveX控件.这时候就需要把自己的release版的发布软件和*.ocx控 ...

  3. POJ 3539 Elevator(同余类BFS)

    题意 有一部电梯,最初停在1层. 电梯有4个按键,上升a,b,c层,回到一层. 求从一层出发.能到达1~h的哪些楼层. (h<=1018,a,b,c<=105) 题解 这种h能大的图论,一 ...

  4. subline Text3 插件安装

    --没有解决,换了vscode 安装Package Control 这是必须的步骤,安装任何插件之前需要安装这个 自动安装的方法最方便,只需要在控制台(不是win的控制台,而是subline 的)里粘 ...

  5. POI0109 POD (最短路)

    POI0109 POD (最短路) 版权声明:本篇随笔版权归作者YJSheep(www.cnblogs.com/yangyaojia)所有,转载请保留原地址! 现在让我们来对一个交通运输图进行研究,这 ...

  6. 读 Paxos 到 ZooKeeper ¥ 50大洋

    一  初识 ZooKeeper              高效且可靠的分布式协调服务.解决分布式一致性问题             统一命名服务.配置管理服务.分布式锁服务.      使用: 比如配 ...

  7. 【C语言】打印1到最大的n位数

    //打印1到最大的n位数 //输入数字n,按顺序打印出从1到最大的n位十进制数. 比方:输入3.则打印出1.2一直到最大的3位数999 #include <stdio.h> #includ ...

  8. .Net 跳转

    Action正常跳转 <a href="@Url.Action("AppDownload")">点击下载APP</a> public A ...

  9. Gym - 100637B Lunch 规律

    题意:n个点,给定起点和终点,可以每次可以走一格或两格,走一格则需要一个代价,每个格子只能走一次,问从起点到终点并经过每一个点的最小代价 思路:这题我没看出什么道理,先打了个暴力,结果发现了个相当坑的 ...

  10. 把华为交换机设置成时钟源服务器(NTP)

    把华为交换机设置成时钟源服务器(NTP),提供给下面客户端Linux服务器使用, 1,先设置交换机的时区,和正确时间 # 假设地理位置在中国北京,设置本地时区名称为BJ. 如果系统默认的UTC是伦敦时 ...