前言
bootstrap fileinput是一个很好的文件上传插件。
但是官方不出api，这就尴尬了。
百度一下，每个人写法都不相同，好多代码本身都是错的。我修改后才能跑起来。
综上所述：所以今天我摸索了一天，把今天能够跑的起来的程序核心代码贴上。
完整demo在文章末尾github地址上
基于本人习惯：所用前端控件均为2017年最新的。
最后再唠叨一句：bootstrap不支持IE8极其以下的。没必要与IE较真，毕竟微软人家自己的win10都抛弃ie了。我们又何苦抓着不放呢

功能说明
这个版本的功能比较单一，图片不能提前上传，只能与表单一起提交。也不支持多图上传，适合单张图片上传需求。多张的话，请看我写的另外两篇博客


核心代码

因为是ssm项目，所以dao层和pojo是逆向工程生成的，service层和controller层基本一样，所以这3层的代码我就不贴出来，仅仅贴出核心代码的controller和jsp
ArticleController.java

package com.isd.controller;

import java.io.File;

import java.io.IOException;

import java.io.PrintWriter;

import java.util.HashMap;

import java.util.List;

import java.util.Map;

import java.util.UUID;

import javax.servlet.http.HttpServletResponse;

import javax.servlet.http.HttpSession;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestParam;

import org.springframework.web.bind.annotation.ResponseBody;

import org.springframework.web.multipart.MultipartFile;

import org.springframework.web.servlet.ModelAndView;

import com.isd.pojo.Article;

import com.isd.service.ArticleService;

@Controller

public class ArticleController {

        //用于检测图片是否上传成功

        public void checkUpIsOk(int i,HttpServletResponse response) throws IOException{

            response.setHeader("content-type", "text/html;charset=UTF-8");

            response.setCharacterEncoding("UTF-8");

            PrintWriter out = response.getWriter();//获取PrintWriter输出流

            if(i==0){

                out.write("插入失败");

                out.write("<script>setTimeout(function(){"+

                        "history.go(-1);"+

                "},500) </script>");

                out.close();

            }else{

                out.write("插入成功");

                out.write("<script>setTimeout(function(){"+

                        "location.href='goList'"+

                "},500) </script>");

                out.close();

            }

        }

       //新增文章保存

        @Autowired

        private ArticleService articleService;

        @RequestMapping("addArticle")

        public void addArticle(HttpSession session,HttpServletResponse response,Article record,MultipartFile image) throws IllegalStateException, IOException {

            //原始名称

            String oldFilename = image.getOriginalFilename();

            //上传图片

            boolean b=image!=null && oldFilename!=null && oldFilename.length()>0;

           //存储图片的物理路径

            String pic_path = session.getServletContext().getRealPath("WEB-INF/static/upload");

            if(b){

                //新的图片名称

                String newFileName = UUID.randomUUID() + oldFilename.substring(oldFilename.lastIndexOf("."));

                //新图片

                File newFile = new File(pic_path+"/"+newFileName);

                //将内存中的数据写入磁盘

                image.transferTo(newFile);

                //将新图片名称写到book中

                record.setUrl(newFileName);

                //新增的这条记录插入数据库

                int i=articleService.insert(record);

                checkUpIsOk(i,response);

            }else{

                record.setUrl("default.png");

                int i=articleService.insert(record);

                checkUpIsOk(i,response);

            }

        }

        //文章列表跳转

        @RequestMapping("goList")

        public ModelAndView goList(){

            List<Article> artall=articleService.selectAll();

            System.out.println(artall.size());

            ModelAndView mv=new ModelAndView();

            mv.addObject("artall",artall);

            mv.setViewName("list");

            return mv;

        }

        //新增文章跳转

        @RequestMapping("goAdd")

        public String goAdd(){

            return "add";

        }

}

add.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%

    String path = request.getContextPath();

    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<html>

    <head>

        <meta charset="utf-8">

        <title>图片上传</title>

        <!-- jq -->

        <script type="text/javascript" src="<%=basePath%>static/plugs/jquery-3.1.1.min.js"></script>

        <!-- bootstrap -->

        <link rel="stylesheet" href="<%=basePath%>static/plugs/bootstrap/css/bootstrap.min.css">

        <script type="text/javascript" src="<%=basePath%>static/plugs/bootstrap/js/bootstrap.min.js"></script>

        <!-- 图片上传即使预览插件 -->

        <link rel="stylesheet" href="<%=basePath%>static/plugs/bootstrap-fileinput/css/fileinput.min.css">

        <script type="text/javascript" src="<%=basePath%>static/plugs/bootstrap-fileinput/js/fileinput.min.js"></script>

        <script type="text/javascript" src="<%=basePath%>static/plugs/bootstrap-fileinput/js/locales/zh.js"></script>

        <style>

            .container{padding-top:60px}

        </style>

    </head>

    <body>

        <div class="container">

            <div class="row">

                <div class="col-sm-6 col-sm-offset-3">

                    <form class="form-horizontal"  role="form" method="post"  action="<%=basePath%>addArticle"  enctype="multipart/form-data" >

                        <div class="form-group">

                            <label class="col-sm-2 control-label">描述</label>

                            <div class="col-sm-10">

                                <input type="text" name="describ" class="col-sm-10 form-control"   placeholder="请描述">

                            </div>

                        </div>

                        <div class="form-group">

                            <label class="col-sm-2 control-label">缩略图</label>

                            <div class="col-sm-10">

                                <input type="file" name="image" class="col-sm-10 myfile" value=""/>

                            </div>

                        </div>

                        <button type="submit" class="btn btn-default col-sm-2 col-sm-offset-4">提交</button>

                    </form>

                </div>

            </div>

        </div>

        <script>

            $(".myfile").fileinput({

                 showUpload: false, //是否显示上传按钮,跟随文本框的那个

                 showRemove : false, //显示移除按钮,跟随文本框的那个

                 allowedFileTypes: ['image'],//配置允许文件上传的类型

                 allowedPreviewTypes : [ 'image' ],//配置所有的被预览文件类型

                 allowedPreviewMimeTypes : [ 'jpg', 'png', 'gif' ],//控制被预览的所有mime类型

                 language : 'zh'

            })

        </script>

    </body>

</html>

list.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>

<%

    String path = request.getContextPath();

    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<html>

    <head>

        <meta charset="utf-8">

        <title>图片上传</title>

        <!-- jq -->

        <script type="text/javascript" src="${basePath}static/plugs/jquery-3.1.1.min.js"></script>

        <!-- bootstrap -->

        <link rel="stylesheet" href="${basePath}static/plugs/bootstrap/css/bootstrap.min.css">

        <script type="text/javascript" src="${basePath}static/plugs/bootstrap/js/bootstrap.min.js"></script>

        <!-- 图片上传即使预览插件 -->

        <link rel="stylesheet" href="${basePath}static/plugs/bootstrap-fileinput/css/fileinput.min.css">

        <script type="text/javascript" src="${basePath}static/plugs/bootstrap-fileinput/js/fileinput.min.js"></script>

        <style>

            .container{padding-top:60px}

            .pic{width:100px;}

            td {vertical-align: middle!important;}

        </style>

    </head>

    <body>

        <div class="container">

            <div class="row">

            <button  class="btn btn-default col-sm-2 pull-right add">新增</button>

            <table class="table table-striped table-bordered">

                <caption>文章列表</caption>

            <thead>

                <tr>

                     <th>id</th>

                     <th>描述</th>

                     <th>缩率图</th>

                </tr>

            </thead>

            <tbody>

                <c:forEach var="item" items="${artall}">

                    <tr>

                        <td>${item.id}</td>

                        <td>${item.describ}</td>

                        <td>

                            <img src="${basePath}static/upload/${item.url}" class="pic"/>

                        </td>

                    </tr>

                </c:forEach>

                </tbody>

            </table>

            </div>

        </div>

        <script>

            $(".add").click(function(){

                location.href="${basePath}goAdd";

            })

        </script>

    </body>

</html>

数据库设计

项目完整地址

https://git.oschina.net/dshvv/bootstrap_fileinput_v1.git

Bootstrap fileinput v1.0（ssm版）的更多相关文章

  1. Bootstrap fileinput v3.0（ssm版）

    说明在上一个版本即Bootstrap fileinput v2.0(ssm版)的基础上,增加了多处都需要上传的需求 核心代码ArticleController.java package com.isd ...

  2. [Android应用]《花界》V1.0 正式版隆重发布！

    http://www.cnblogs.com/qianxudetianxia/archive/2012/04/05/2433669.html 1. 软件说明(1). 花界是一款看花软件:“看花,议花, ...

  3. 硬盘图标修改器 V1.0 绿色版

    软件名称:硬盘图标修改器 V1.0 绿色版软件语言: 简体中文授权方式: 免费软件应用平台: Win7 / Vista / Win2003 / WinXP / Win2008 软件大小: 12.3MB ...

  4. Bootstrap fileinput v2.0（ssm版）

    前言bootstrap fileinput是一个很好的文件上传插件.但是官方不出api,这就尴尬了.百度一下,每个人写法都不相同,好多代码本身都是错的.我修改后才能跑起来.综上所述:所以今天我摸索了一 ...

  5. ISkyShop B2B2C 商城系统V1.0正式版隆重公布

    ISkyShop核心开发团队结合7年电商开发经验,历经1年多时间的设计研发,于2014年6月12日隆重推出ISkyShop B2B2C 商城系统V1.0,B2B2C商城系统是ISkyShop独立自主研 ...

  6. OdnShop 发布 V1.0 正式版，完整可用的开源微商城系统

    OdnShop是基于ASP.NET 4.0+Mysql开发的开源微商城系统,我们的目标是构建一个核心完善而又轻量级的微商城平台. 本版本更新功能: 1,修正数据库操作的部分表名称的表前缀错误: 2,修 ...

  7. 万航单位换算器 V1.0 绿色版

    软件名称: 万航单位换算器软件语言: 简体中文授权方式: 免费软件运行环境: Win 32位/64位软件大小: 347KB图片预览: 软件简介:万航单位换算器是一个可以随意转换单位的绿色软件,这个软件 ...

  8. Fuckey V1.0 Beta版发布！！！

    Fuckey,以前叫FullNexus4,只因为当时想做一个软件给自己的Nexus 4,方便方便一下,不过这名字感觉太局限了,毕竟很多朋友不是使用的Nexus 4的手机,但却还是使用了FullNexu ...

  9. AEAI EM费用管理系统V1.0.2版本开源发布

    本次开源发布是AEAI EM费用管理系统 V1.0.2版,该版本是此产品的首个版本,产品现已开源并上传至开源社区http://www.oschina.net/p/aeai-em. 产品说明: AEAI ...

随机推荐

  1. POJ 1691 Painting a Board(状态压缩DP)

    Description The CE digital company has built an Automatic Painting Machine (APM) to paint a flat boa ...

  2. 09python之运算

    运算 算数运算: 两个数相除,得到商和余数的数组的内置方法  数据.__divmod__()  场景 数据库共99条数据,每个页面10条数据,需要多少个页面  >>> a = 98  ...

  3. 使用Editplus和Dev C++配置C++的编译运行环 境

    或许大家会有疑问,为何不直接使用VC;VS;或Dev这些IDE呢?何必舍近求远.主要是因为写程序这么多年来已经习惯了Editplus,包括他的快捷键,语法自动完成,语法提示等等,Editplus用了这 ...

  4. ReactiveCocoa - iOS开发的新框架

    本文转载至 http://www.infoq.com/cn/articles/reactivecocoa-ios-new-develop-framework ReactiveCocoa(其简称为RAC ...

  5. 用示例详解php连接数据库操作

    首先数据库mydb有三个表: 1  info表 2  users表 3  sname表 首先先做一个登录主页面 login_1.php <!DOCTYPE html PUBLIC "- ...

  6. 解决报错：scandir() has been disabled for security reasons

    服务器环境: LNMP 在服务器部署代码时候.遇到了这个问题. 蛋疼啊! 2 解决办法:  打开phpinfo.php , 搜索: scandir 找到disabled_function,确认此函数未 ...

  7. Computer Science Theory for the Information Age-5: 学习理论——VC维的定义以及一些例子

    学习理论——VC维的定义以及一些例子 本文主要介绍一些学习理论上的东西.首先,我们得明确,从训练集上学习出来的分类器的最终目标是用于预测未知的样本,那么我们在训练的时候该用多少的样本才能使产生的分类器 ...

  8. Python 自学积累（一）

    1. 当"print os.path.dirname(__file__)"所在脚本是以完整路径被运行的, 那么将输出该脚本所在的完整路径,比如: python d:/pythonS ...

  9. Android 小例子服务端

    这是之前发布的Android项目的服务端源码,只是简单的根据请求返回了一些测试数据,没有实现对数据库的操作,可以根据需求自己实现. 这是mvc4 WebAPI项目,需要用vs2012打开. 如果是用的 ...

  10. SpringCloud--Ribbon负载均衡

    Ribbon实现客户端负载均衡 负载均衡:是对系统的高可用.网络压力的缓解和处理能力扩容的重要手段之一. 硬件负载均衡:主要通过在服务器节点之间安装专门用于负载均衡的设备: 软件负载均衡:通过在服务器 ...