图片上传+图片回显 

@ResponseBody
@PostMapping(value = "/upload", headers = "content-type=multipart/*" )
public String uploadFile(@RequestParam(value = "file",required = false) MultipartFile file){
    if (file.isEmpty()) {
        System.out.println("文件为空空");
    }
    String fileName = file.getOriginalFilename();  // 文件名
    String suffixName = fileName.substring(fileName.lastIndexOf("."));  // 后缀名
    String filePath = "H://img//"; // 上传后的路径
    fileName = UUID.randomUUID() + suffixName; // 新文件名
    File dest = new File(filePath + fileName);
    if (!dest.getParentFile().exists()) {
        dest.getParentFile().mkdirs();
    }
    try {
        file.transferTo(dest);
    } catch (IOException e) {
        e.printStackTrace();
    }
    String filename = "/img/" + fileName;
    return filename;// 我这里是直接返回的名字
}

以上是upload 上传的方法我是将上传的路径直接返回到了页面去回显。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-2.1.0.js"></script>
</head>
<body>
    照片:<input type="file" name="file"  id="file" />
<input type="button" id="upload" value="上传" /><br id="br"/>

</body>
<script type="text/javascript">
            $("#upload").click(function () {
                var formData = new FormData();
                var data=$(this).prev()[0].files[0];
                formData.append("file",data);
                alert(formData.toString())
                $.ajax({
                    type: 'post',
                    url: "/file/upload", //上传文件的请求路径必须是绝对路劲
                    data: formData,
                    cache: false,
                    processData: false,
                    contentType: false,
                }).success(function (data) {
                    $("#br").after("<img style='width: 200px;height: 200px' src='"+data+"' name='fileImg'><br>/");
                }).error(function () {
                    alert("上传失败");
                });
            });
        }
    )
</script>
</html>

页面  ：这是使用的ajax上传图片

posted @ 2020-11-08 16:02  JpfBlog  阅读(323)  评论(0)    收藏  举报