使用bootstrap图片上传插件(fileInput)springmvc实现图片上传全流程

1、文件上传插件File Input介绍

这个插件主页地址是：http://plugins.krajee.com/file-input，可以从这里看到很多Demo的代码展示：http://plugins.krajee.com/file-basic-usage-demo。

这是一个增强的 HTML5 文件输入控件，是一个 Bootstrap 3.x 的扩展，实现文件上传预览，多文件上传等功能。

一般情况下，我们需要引入下面两个文件，插件才能正常使用：

bootstrap-fileinput/css/fileinput.min.css

bootstrap-fileinput/js/fileinput.min.js

这是其中一个demo，网站有基础的和高级的demo演示，这里有不一一列出来了

插件支持中文版，需要引入zh.js，位置在/js/locales/zh.js

以上是基础的引入，如需其他比如说主题请自行引入其他js和css

---

本人用这个demo讲解

1.HTML

 <div class="form-group">   <input id="itemImagers" name="itemImagers" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="2"> </div>

2.初始化上传插件

//初始化fileinput控件（第一次初始化）    function initFileInput(ctrlName, uploadUrl) {        var control = $('#' + ctrlName);        control.fileinput({            language: 'zh', //设置语言            uploadUrl: uploadUrl, //上传的地址            allowedFileExtensions : ['jpg', 'png','gif'],//接收的文件后缀            //uploadAsync: false, //插件支持同步和异步            //showUpload: false, //是否显示上传按钮        }).on("fileuploaded", function(event, data) {              //上传图片后的回调函数，可以在这做一些处理        });    }$(function(){    //指定上传controller访问地址    var path = 'http://localhost:8080/sbootstrap/upload';    //页面初始化加载initFileInput()方法传入ID名和上传地址    initFileInput("itemImagers",path);})

3.使用spring的图片上传插件

首先springMVC配置文件：

<?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"    xmlns:context="http://www.springframework.org/schema/context"    xmlns:mvc="http://www.springframework.org/schema/mvc"    xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.2.xsd        http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.2.xsd        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.2.xsd">    <!-- 配置注解驱动 -->    <mvc:annotation-driven/>    <!-- 配置包扫描器，扫描@Controller注解的类 -->    <context:component-scan base-package="cn.yuan"/>    <!-- 视图解析器   自行配置    <bean        class="org.springframework.web.servlet.view.InternalResourceViewResolver">        <property name="prefix" value="/WEB-INF/jsp/" />        <property name="suffix" value=".jsp" />    </bean>     -->    <!-- 配置资源映射  自行配置    <mvc:resources location="/css/" mapping="/css/**"/>    <mvc:resources location="/js/" mapping="/js/**"/>    <mvc:resources location="/themes/" mapping="/themes/**"/>    <mvc:resources location="/static/" mapping="/static/**"/>    -->    <!-- 配置文件上传解析器-->    <bean id="multipartResolver"        class="org.springframework.web.multipart.commons.CommonsMultipartResolver">        <!-- 设定默认编码-->        <property name="defaultEncoding" value="UTF-8"></property>        <!-- 设定文件上传的最大值5MB，5*1024*1024-->        <property name="maxUploadSize" value="5242880"></property>    </bean></beans>

4.Controller

package cn.ipanel.controller;import java.io.File;import java.util.UUID;import javax.servlet.http.HttpServletRequest;import org.springframework.stereotype.Controller;import org.springframework.ui.Model;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.ResponseBody;import org.springframework.web.multipart.MultipartFile;/** * 上传图片 * @author 会飞的大猿猿 * */@Controllerpublic class ItemUpload {     @RequestMapping(value="/upload",method=RequestMethod.POST)      @ResponseBody        private String fildUpload(@RequestParam(value="itemImagers",required=false) MultipartFile file,                  HttpServletRequest request,Model model)throws Exception{              //基本表单              //获得物理路径webapp所在路径              String pathRoot = request.getSession().getServletContext().getRealPath("");              String path="";              if(!file.isEmpty()){                  //生成uuid作为文件名称                  String uuid = UUID.randomUUID().toString().replaceAll("-","");                 //获得文件类型（可以判断如果不是图片，禁止上传）                  String contentType=file.getContentType();                  //获得文件后缀名称                  String imageName=contentType.substring(contentType.indexOf("/")+1);                  //地址                path="/static/images/"+uuid+"."+imageName;                  file.transferTo(new File(pathRoot+path));              }else {                //可以使用以下包装类。响应结果，请看附件                //ResponseResult.build(400,"上传图片失败");            }            System.out.println(path);              request.setAttribute("imagesPath", path);              model.addAttribute("imgPath",path);            return path;          }  }

必须要引入的jar包

注意

这个图片上传插件如果是多张图片，那么每一张图片请求一次，3张图片请求3次，所以在回调函数中，可以将返回的路径拼接好存入数据库等。

此教程还待完善，如有好的想法可一起讨论。谢谢

页面响应工具类地址
点我下载 http://pan.baidu.com/s/1kViie83