图片上传,一次性可以上传多个图片,每个图片可以有名字、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. pycaffe 可视化常用

    net.params['layername'].[0]/[1] caffe的一个程序跑完之后会在snapshot所指定的目录下产生一个后缀名为caffemode的文件,这里存放的就是我们在训练网络的时 ...

  2. mongodb 的索引

                索引加快了查询速度,但是降低了写入速度.所以不要在没必要的属性上加索引.             在 mongodb 中索引可以按倒序/正序创建,便于排序.           ...

  3. Hadoop集群配置搭建

    环境:Centos 6.9,Hadoop 2.7.1,JDK 1.8.0_161,Maven 3.3.9 前言: 1.配置一台master服务器,两台或多台slave服务器.    2.master可 ...

  4. EChart报表插件使用笔记(1)

    报表插件Echart java类 package com.spring.controller; import java.io.IOException; import java.util.Arrays; ...

  5. 【cocos2d-x 3.7 飞机大战】 决战南海I (四) 敌机管理

    敌方飞机应该不定时的出现,有自己的生命周期.运动轨迹.这个类用来管理敌机的产生.移动.爆炸.销毁等. 敌机管理类主要函数例如以下 //绑定控制器(更新分数) void bindController(C ...

  6. An internal error occurred during: &quot;Checking tomcat state&quot;. Error while reading server.xml

    An internal error occurred during: "Checking tomcat state". Error while reading server.xml ...

  7. SharePoint Search之(五)Query spelling correction— 查询拼写纠正

     Query spelling correction 在使用搜索引擎的时候.假设一不小心输入错误,或者对于某个词语记得不太清楚,搜索引擎会自己主动纠正: 这个功能可以缩短用户的时间,很好用.在Sh ...

  8. Weka中数据挖掘与机器学习系列之Weka简介(二)

    不多说,直接上干货! Weka简介 Weka是怀卡托智能分析环境(Waikato Environment for Knowledge Analysis)的英文字首缩写,官方网址为:http://www ...

  9. SQL Server 2005高可用性模式下创建数据库镜像

    SQL Server 2005高可用性模式下创建数据库镜像   高可用性模式下创建数据库镜像 第一步: --创建镜像用数据库-在主服务器上操作 create database db_mirror on ...

  10. OPENCV(2) —— Basic Structures(一)

    DataType A primitive OpenCV data type is one of unsigned char, bool,signed char, unsigned short, sig ...