首页 > 其他分享> > 图片上传页面

图片上传页面

2019-07-11 17:52:46 作者：互联网

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <titl>上传图片演示</titl></title>
    <script th:src="@{/resources/js/js/jquery-3.3.1.min.js}"></script>
    <script>
        function setImg(obj) {
            var f = $(obj).val();
            alert(f);
            console.log(obj);
            if (f == null || f == undefined || f == '') {
                return false;
            }
            if (!/\.(?:png|jpg|bmp|gif|PNG|JPG|BMP|GIF)$/.test(f)) {
                alert("类型必须是图片(.png|jpg|bmp|gif|PNG|JPG|BMP|GIF)");
                $(obj).val('');
                return false;
            }
            var data = new FormData();
            console.log(data);
            $.each($(obj)[0].files, function (i, file) {
                data.append('file', file);
            });
            console.log(data);
            $.ajax({
                type: "POST",
                url: "/api/uploadImage2", //上传路径
                data: data,
                cache: false,
                contentType: false,    //不可缺
                processData: false,    //不可缺
                dataType: "json",
                success: function (ret) {
                    console.log(ret);
                    if (ret.statusText == "ok") {
                        alert(ret.imageUrl[0]);
                        $("#photoUrl").val(ret.imageUrl[0]);//将地址存储好
                        console.log("图片返回地址："+ret.imageUrl[0]);
                        $("#photourlShow").attr("src", ret.imageUrl[0]);//显示图片
                    } else {
                        $("#url").val("");
                        $(obj).val('');
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert("上传失败，请检查网络后重试");
                }
            });
        }
    </script>
</head>
<body>

<div class="form-group">
        <label class="col-sm-2 control-label">身份证正面照片:</label>
        <div class="col-sm-10">
        <input type="hidden" name="img"  id="photoUrl"/>
        <input type="file" name="logoFile" id="logoFile" onchange="setImg(this);">
        <span><img id="photourlShow" src="" width="300" height="197"/></span>
        </div>
    
</div>


</body>
</html>

　　图片上传后台

@RequestMapping(value = "/uploadImage2")
    @ResponseBody
    public PictureUrl upload2(@RequestParam("file") List<MultipartFile> url, HttpServletRequest request, HttpServletResponse response){
        //图片封装对象
        System.out.println("参数大小："+url.size());
        PictureUrl pictureUrl = new PictureUrl();
        //获取项目请求路径
        String contentPath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath();
        try{
            //判断图片数量
            if(url.size() == 0){
                pictureUrl.setStatusText("false");
            }else{
                OutputStream os = null;
                //封装返回图片路径列表
                List<String> urlList = new ArrayList<>();
                for (MultipartFile file : url){
                    //利用uuid产生新的文件名，防止文件名重复
                    System.out.println("文件名："+file.getOriginalFilename());
                    String fileNam2 = UUID.randomUUID().toString();
                    String imagePath2 = imagePath + fileNam2+".png";
                    File file1 = new File(imagePath2);
                    os = new FileOutputStream(file1);
                    //将文件写入磁盘中
                    os.write(file.getBytes());
                    //图片访问路径
                    String imageUrl = contentPath+"/image/"+fileNam2+".png";
                    urlList.add(imageUrl);
                    System.out.println("文件路径："+imageUrl);
                }
                pictureUrl.setStatusText("ok");
                pictureUrl.setImageUrl(urlList);
                os.flush();
                os.close();
            }
        }catch (Exception e){
            e.printStackTrace();
            pictureUrl.setStatusText("false");
            return pictureUrl;
        }
        return pictureUrl;
    }

标签：false,imageUrl,ret,pictureUrl,file,obj,页面,上传,图片
来源： https://www.cnblogs.com/lazyli/p/11171544.html