图片上传5-多个图片上传,独立项目Demo和源码
图片上传,一次性可以上传多个图片,每个图片可以有名字、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和源码的更多相关文章
- 在CentOS 7上安装Node.js的4种方法(yum安装和源码安装)
CentOS 7上的安装方法,其中涵盖了源码安装,已编译版本安装,EPEL(Extra Packages for Enterprise Linux)安装和通过NVM(Node version mana ...
- hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images
hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...
- 【转】asp.net(c#)使用HttpWebRequest附加携带请求参数以post方式模拟上传大文件(以图片为例)到Web服务器端
原文地址:http://docode.top/Article/Detail/10002 目录: 1.Http协议上传文件(以图片为例)请求报文体内容格式 2.完整版HttpWebRequest模拟上传 ...
- 从web编辑器 UEditor 中单独提取图片上传,包含多图片单图片上传以及在线涂鸦功能
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.(抄的...) UEditor是非常好用的富文 ...
- 微信JSSDK多图片上传并且解决IOS系统上传一直加载的问题
微信多图片上传必须挨个上传,也就是不能并行,得串行: 那么我们可以定义一个如下所示的上传函数: var serverIds = []; function uploadImages(localImage ...
- php用jquery-ajax上传多张图片限制图片大小
php用jquery-ajax上传多张图片限制图片大小 /** * 上传图片,默认大小限制为3M * @param String $fileInputName * @param number $siz ...
- 适用于各浏览器支持图片预览,无刷新异步上传js插件
文件上传无疑是web应用中一个非常常用的功能,不管是PHP.jsp还是aspx.mvc等都会需要文件上传,但是众所周知当使用自带的文件上传功能时总会出现页面刷新的情况.当然现在有了html5这个好东西 ...
- [上传下载] C# ImageUpload图片上传类教程与源码下载 (转载)
点击下载 ImageUpload.zip 功能如下图片1.设置属性后上传图片,用法如下 /// <summary> /// 图片上传类 /// </summary> //--- ...
- MVC下form表单一次上传多种类型的图片(每种类型的图片可以上传多张)
form表单一次上传多种类型的图片(每种类型的图片可以上传多张) controller中的action方法 public ActionResult UploadImage( ) { in ...
随机推荐
- 微星(MSI)新主板B150M MORTAR U盘装win7的坎坷经历
新买的微星主板,热心的同事帮忙装好了win10,但是显卡驱动没装好,屏幕都快看瞎了眼,再者,楼主非常不喜欢win10的花哨,所以就装回了win7.下面来说一下我装win7的痛苦经历. 我是用UItra ...
- 欢迎访问微先锋vXianFeng官方博客
欢迎访问微先锋vXianFeng官方博客,专注微商城.P2P理财.山寨矿机平台研究与开发!
- windows用xstart远程连接linux图形用户界面
转载:https://blog.csdn.net/yabingshi_tech/article/details/51839379 双击xstart 输入:/usr/bin/xterm -ls -dis ...
- easyui-combobox实现取值范围的联动
需求:需要用两个combobox来输入一个年月的范围,下拉框的内容从服务器获取.需要实现选中前者后,后者的下拉框中不能显示比前者数值小的:选中后者后,前者的下拉框内容不能显示比后者数值大的 有两个co ...
- mysql主从同步错误恢复
Mysql主从同步集群在生成环境使用过程中,如果主从服务器之间网络通信条件差或者数据库数据量非常大,容易导致MYSQL主从同步延迟. MYSQL主从产生延迟之后,一旦主库宕机,会导致部分数据没有及时同 ...
- HDU 4889 Scary Path Finding Algorithm
其实这个题是抄的题解啦…… 题解给了一个图,按照那个图模拟一遍大概就能理解了. 题意: 有一段程序,给你一个C值(程序中某常量),让你构造一组数据,使程序输出"doge" 那段代码 ...
- 中断API之enable_irq
void enable_irq(unsigned int irq) 用于使能一个irq. void disable_irq(unsigned int irq)则用于禁止一个irq 其使用的例程如下: ...
- MyBatis学习总结(17)——Mybatis分页插件PageHelper
如果你也在用Mybatis,建议尝试该分页插件,这一定是最方便使用的分页插件. 分页插件支持任何复杂的单表.多表分页,部分特殊情况请看重要提示. 想要使用分页插件?请看如何使用分页插件. 物理分页 该 ...
- hdu 1024 最大m子段和
注:摘的老师写的 最大m子段和问题 以-1 4 -2 3 -2 3为例最大子段和是:6最大2子段和是:4+(3-2+3)=8所以,最大子段和和最大m子段和不一样,不能用比如先求一个最大子段和,从序列中 ...
- Linux下FTPserver的实现(仿vsftpd)
继上一篇博文实现Linux下的shell后,我们进一步利用网络编程和系统编程的知识实现Linux下的FTPserver.我们以vsftpd为原型并实现了其大部分的功能.因为篇幅和时间的关系,这里不再一 ...