springboot\maven 添加上传图片、三级联动

pom文件上传头像依赖

<!-- thymeleaf渲染模版 -->
<dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

controller层上传代码

@RequestMapping(value = "add",method = RequestMethod.POST)
public String add(HttpServletRequest request, Stock stock, MultipartFile source) throws Exception {
        System.out.println(stock);
    System.out.println(source);
    //获取上传文件名称
    String filename = source.getOriginalFilename();

    //获取新的文件名
    long millis = System.currentTimeMillis();
    String newName = millis+filename;

    //获取文件流
    InputStream inputStream1 = null;
    try {
        inputStream1 = source.getInputStream();
    } catch (IOException e) {
        e.printStackTrace();
    }

    //获取物理路径
    String wlPath = "D:\\Program Files\\JetBrains\\workspace\\stock\\src\\main\\resources\\static\\img/"+newName;

    //逻辑路径
    String ljPath = "../img/"+newName;

    //临时路径
    String pathRoot = request.getSession().getServletContext().getRealPath("/");//自动寻找target根目录
    String lsPath = pathRoot+"\\img\\"+newName;

    //判断是否需要创建文件夹
    //物理路径文件夹
    File wlFile = new File("D:\\Program Files\\JetBrains\\workspace\\stock\\src\\main\\resources\\static\\img");
    //临时路径文件夹
    File lsFile = new File(pathRoot+"\\img");

    if(!wlFile.exists()) {
        wlFile.mkdir();
    }
    if(!lsFile.exists()) {
        lsFile.mkdir();
    }

    //执行读写操作
    if(!source.isEmpty()) {
        //将文件放入物理路径
        FileOutputStream wlFileOutputStream = new FileOutputStream(wlPath);
        //将文件放入临时路径
        FileOutputStream lsFileOutputStream1 =new FileOutputStream(lsPath);

        int line = 0;

        while ((line = inputStream1.read()) != -1) {
            //写入物理路径
            wlFileOutputStream.write(line);
            //写入临时路径
            lsFileOutputStream1.write(line);
        }

        wlFileOutputStream.flush();
        lsFileOutputStream1.flush();
        lsFileOutputStream1.close();
        wlFileOutputStream.close();
        inputStream1.close();
    }
    //将相对路径放入数据库中
    stock.setPhoto(ljPath);
    service.insertStock(stock);
    return "redirect:/stock/show";
}

ftl页面添加代码
<form class="form-horizontal" action="/stock/add" method="post" enctype="multipart/form-data">
    三级联动导入address.js封装包
    <div class="form-group">
        <div>
            <label class="col-sm-2 control-label">From</label>
        </div>
        <div class="col-md-3">
            <select id="province" runat="server" class="form-control" name="stock_from">
            </select>
        </div>
        <div class="col-md-3">
            <select id="city" runat="server" class="form-control" name="stock_from">
            </select>
        </div>
        <div class="col-md-3">
            <select id="county" runat="server" class="form-control" name="stock_from">
            </select>
        </div>
        <script type="text/javascript">
            setup();
        </script>
    </div><br>
    <div></div>
上传头像页面代码，注意from表单中enctype不要忘记
   <div class="form-group">
        <label class="col-sm-2 control-label">Photo</label>
        <div class="col-sm-10">
               
               <div style="margin :0px auto; width:990px;">

                <input type="file"  name="source" id="doc" multiple="multiple"  style="width:150px;" οnchange="javascript:setImagePreviews();" accept="image/*" />

                <div id="dd" style=" width:990px;"></div>

            </div>
        </div>
    </div>
    
</form>
 图片添加后可直接显示在页面
<script type="text/javascript">
            //下面用于多图片上传预览功能
            function setImagePreviews(avalue) {
                var docObj = document.getElementById("doc");
                var dd = document.getElementById("dd");
                dd.innerHTML = "";
                var fileList = docObj.files;
                for (var i = 0; i < fileList.length; i++) {
                    dd.innerHTML += "<div style='float:left' > <img id='img" + i + "'  /> </div>";
                    var imgObjPreview = document.getElementById("img"+i);
                    if (docObj.files && docObj.files[i]) {
                        //火狐下，直接设img属性
                        imgObjPreview.style.display = 'block';
                        imgObjPreview.style.width = '150px';
                        imgObjPreview.style.height = '180px';
                        //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
                        imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]);
                    }
                    else {
                        //IE下，使用滤镜
                        docObj.select();
                        var imgSrc = document.selection.createRange().text;
                        alert(imgSrc)
                        var localImagId = document.getElementById("img" + i);
                        //必须设置初始大小
                        localImagId.style.width = "150px";
                        localImagId.style.height = "180px";
                        //图片异常的捕捉，防止用户修改后缀来伪造图片
                        try {
                            localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                            localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
                        }
                        catch (e) {
                            alert("您上传的图片格式不正确，请重新选择!");
                            return false;
                        }
                        imgObjPreview.style.display = 'none';
                        document.selection.empty();
                    }
                }
                return true;
            }
</script>