Bootstrap fileinput v2.0（ssm版）

 

前言
bootstrap fileinput是一個很好的文件上傳插件。
可是官方不出api，這就尷尬了。
百度一下，每一個人寫法都不相同，好多代碼自己都是錯的。我修改後才能跑起來。
綜上所述：因此今天我摸索了一天，把今天可以跑的起來的程序核心代碼貼上。
完整demo在文章末尾github地址上
基於本人習慣：所用前端控件均爲2017年最新的。
最後再嘮叨一句：bootstrap不支持IE8極其如下的。不必與IE較真，畢竟微軟人家本身的win10都拋棄ie了。咱們又何苦抓着不放呢

 

 

 

功能說明
點擊上傳ico，圖片就會發出請求，請求後臺上傳圖片的控制器，文件被寫入服務器後。會把寫入的文件名和路徑返回給前端。
前端再埋入隱藏於
點擊提交時，與其它信息一併入庫

 

 

核心代碼
由於是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.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 {
        @Autowired
        private ArticleService articleService;
    
        //新增文章頁面跳轉
        @RequestMapping("goAdd")
        public String goAdd(){
            return "add";
        }
        //uploadFile
        @ResponseBody
        @RequestMapping("uploadFile")
        public  Map<String,Object> uploadFile(HttpSession session,MultipartFile myfile) throws IllegalStateException, IOException{
            //原始名稱  
            String oldFileName = myfile.getOriginalFilename(); //獲取上傳文件的原名 
            //存儲圖片的物理路徑  
            String file_path = session.getServletContext().getRealPath("WEB-INF/static/upload");
           //上傳圖片  
            if(myfile!=null && oldFileName!=null && oldFileName.length()>0){
                //新的圖片名稱  
                String newFileName = UUID.randomUUID() + oldFileName.substring(oldFileName.lastIndexOf("."));  
                //新圖片  
                File newFile = new File(file_path+"/"+newFileName);  
                //將內存中的數據寫入磁盤  
                myfile.transferTo(newFile);
                //將新圖片名稱返回到前端
                Map<String,Object> map=new HashMap<String,Object>();
                map.put("success", "成功啦");
                map.put("url",newFileName);
                return  map;
            }else{
                Map<String,Object> map=new HashMap<String,Object>();
                map.put("error","圖片不合法");
                return map;
            }
        }
    
       //新增文章保存
        @RequestMapping("addArticle")
        public void addArticle(HttpSession session,HttpServletResponse response,Article record,MultipartFile image) throws IllegalStateException, IOException {
            //若是不傳圖片，那麼則用默認的圖片
            if(record.getUrl()==null||record.getUrl().equals("")){
                record.setUrl("default.png");
            }
            int i=articleService.insert(record);
            checkUpIsOk(i,response);
        }
        
        //用於判斷插入是否成功
        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();
            }
        }
        
        //文章列表頁面跳轉
        @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;
        }
}

 

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="myfile" class="col-sm-10 myfile" value=""/>
                                <input type="hidden" name="url" 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({
                uploadUrl:"<%=basePath%>uploadFile",//上傳的地址
                uploadAsync:true, //默認異步上傳
                showUpload: false, //是否顯示上傳按鈕,跟隨文本框的那個
                showRemove : false, //顯示移除按鈕,跟隨文本框的那個
                showCaption: true,//是否顯示標題,就是那個文本框
                showPreview : true, //是否顯示預覽,不寫默認爲true
                dropZoneEnabled: false,//是否顯示拖拽區域，默認不寫爲true，可是會佔用很大區域
                //minImageWidth: 50, //圖片的最小寬度
                //minImageHeight: 50,//圖片的最小高度
                //maxImageWidth: 1000,//圖片的最大寬度
                //maxImageHeight: 1000,//圖片的最大高度
                //maxFileSize: 0,//單位爲kb，若是爲0表示不限制文件大小
                //minFileCount: 0,
                 maxFileCount: 1, //表示容許同時上傳的最大文件個數
                 enctype: 'multipart/form-data',
                 validateInitialCount:true,
                 previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                 msgFilesTooMany: "選擇上傳的文件數量({n}) 超過容許的最大數值{m}！",
                 allowedFileTypes: ['image'],//配置容許文件上傳的類型
                 allowedPreviewTypes : [ 'image' ],//配置全部的被預覽文件類型
                 allowedPreviewMimeTypes : [ 'jpg', 'png', 'gif' ],//控制被預覽的全部mime類型
                 language : 'zh'
            })
            //異步上傳返回結果處理
            $('.myfile').on('fileerror', function(event, data, msg) {
                console.log("fileerror");
                console.log(data);
            });
            //異步上傳返回結果處理
            $(".myfile").on("fileuploaded", function (event, data, previewId, index) {
                console.log("fileuploaded");
                $("input[name='url']").val(data.response.url);

            });

            //同步上傳錯誤處理
            $('.myfile').on('filebatchuploaderror', function(event, data, msg) {
                console.log("filebatchuploaderror");
                console.log(data);
            });
            
            //同步上傳返回結果處理
            $(".myfile").on("filebatchuploadsuccess", function (event, data, previewId, index) {
                console.log("filebatchuploadsuccess");
                console.log(data);
            });

            //上傳前
            $('.myfile').on('filepreupload', function(event, data, previewId, index) {
                console.log("filepreupload");
            });        
        </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_v2.git