整合前的準備步驟

1.搭建好基礎框架，本文用的是SSM(Spring+SpringMVC+Mybatis)，這裡的過程就不在本文中講了，之前我做個一個demo(ssm整合+使用者模組)，可以參考這個搭建好。

搭建後的效果圖

圖1.

圖2.

圖3.

圖4.

圖5.

在需要編寫的jsp頁面引入元件

本工程的路徑介面如下：

在jsp引入元件需要的js,css，如下程式碼:

<!-- 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 href="<%=basePath%>css/xlstyle.css"
 
 rel="stylesheet">

<!-- 圖片上傳即使預覽外掛 -->
<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>

引入元件，這裡以我自己寫的網站為例：

<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" data-ref="url2"
                                class="col-sm-10 myfile" value="" /> <input type="hidden"
                                name="url2" value="">
                        </div>
                    </div>

還有需要配置元件的詳細js，我這裡是放在了標籤結束的後面：

以上省略
.........
</body>
<script type="text/javascript">
    $(".myfile").fileinput({
        //上傳的地址
        uploadUrl:"<%=basePath%>food/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");
        var ref = $(this).attr("data-ref");
        $("input[name='" + ref + "']").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>

配置tomcat的虛擬路徑

如題,本次圖片上傳是要上傳到伺服器上別的磁碟位置，比如我的電腦作為伺服器來說，一般情況下用tomcat上傳圖片只能上傳到專案的某資料夾中，所以這裡我們需要配置tomcat來開啟tomcat的虛擬路徑，讓tomcat可以對映到本地磁碟的路徑上。操作如下圖：

1.雙擊這裡

2.點選我畫圈的地方

3.配置tomcat的虛擬路徑

path:也就是我們tomcat的虛擬訪問路徑，Documnet Base是我們實際本地磁碟需要被對映的路徑。

SpringMVC的Controller層編寫

@Controller
@RequestMapping("/food")
public class PictureController {

    // uploadFile
    @RequestMapping("/uploadFile")
    @ResponseBody
    public Map<String, Object> uploadFile(MultipartFile myfile)
            throws IllegalStateException, IOException {
        // 原始名稱
        String oldFileName = myfile.getOriginalFilename(); // 獲取上傳檔案的原名
//      System.out.println(oldFileName);
        // 儲存圖片的虛擬本地路徑（這裡需要配置tomcat的web模組路徑，雙擊貓進行配置）
        String saveFilePath = "E://picture";
        // 上傳圖片
        if (myfile != null && oldFileName != null && oldFileName.length() > 0) {
            // 新的圖片名稱
            String newFileName = UUID.randomUUID() + oldFileName.substring(oldFileName.lastIndexOf("."));
            // 新圖片
            File newFile = new File(saveFilePath + "\\" + 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;
        }
    }
}

寫完後直接訪問Controller層配置的路徑，即可成功，最終效果如前面的效果圖一樣。

完。。