使用ajax方式实现图片上传（保存到本地）

1、结果图：

2、前端代码：

<body>
    <div>
        <img src="" id="imgViwe" style="width: 150px; height: 200px" />
        <input type="file" id="file" style="display: none" multiple="multiple"/>
        <a href="javascript:void(0)" onclick="selectImg()">选择图片</a>
        <a href="javascript:void(0)" onclick="uploadImg()">上  传</a>
        <!-- href="javascript:void(0) : 让超链接去执行一个js函数，而不是去跳转到一个地址-->
    </div>
</body>
<script th:src="@{/js/jquery-3.5.1.min.js}"></script>
<script>
   function selectImg() {
       $("#file").click();
   }
   /*能回显，但不能上传*/
   $("#file").on('change', function () {
       var objUrl = getObjectURL(this.files[0]) ;
       if (objUrl) {
           $("#imgViwe").attr("src", objUrl);
       }
   });

   /*真正上传*/
   function uploadImg() {
       var file = $("#file")[0].files[0];
       console.log("@@@-->" + file);
       if (file){
           var formData = new FormData();
           formData.append('file', file);
           $.ajax({
               url: "/upload",
               type: "post",
               data: formData,
               contentType: false,
               processData: false,
               success: function (res) {
                   console.log(JSON.stringify(res));
               }
           })
       }
   }

   function getObjectURL(file) {
       var url = null;
       if (window.createObjectURL != undefined) { // basic
           url = window.createObjectURL(file);
       } else if (window.URL != undefined) { // mozilla(firefox)
           url = window.URL.createObjectURL(file);
       } else if (window.webkitURL != undefined) { // webkit or chrome
           url = window.webkitURL.createObjectURL(file);
       }
       return url;
   }

</script>

3、后端代码（java实现）：

@PostMapping("/upload")
    @ResponseBody
    public JSONObject upload(@RequestPart(name = "file", required = false) MultipartFile file, HttpServletRequest request){
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM");
        JSONObject jsonObject = new JSONObject();
        String originalFilename = file.getOriginalFilename();
        // 获取文件后缀
        String suffix = originalFilename.substring(originalFilename.lastIndexOf(".") + 1, originalFilename.length());
        // 拼接文件上传路径
        String savePath = Global.getProfile() + "upload/" + sdf.format(new Date()) + "/";
        File savePathFile = new File(savePath);
        if (!savePathFile.exists()) {
            //若不存在该目录，则创建目录
            savePathFile.mkdirs();
        }
        String filename = UuidUtil.get32UUID() + "." + suffix; // 文件重命名
        try {
            //将文件保存指定目录
            File filePath = new File(savePath + filename);
            file.transferTo(filePath);
        } catch (Exception e) {
            jsonObject.put("type", "error");
            jsonObject.put("msg", "保存文件异常！");
            e.printStackTrace();
            return jsonObject;
        }
        jsonObject.put("type", "success");
        jsonObject.put("msg", "上传图片成功！");
        return jsonObject;
    }

Global.java

package com.jd.blog.common;

public class Global {
	private static String profile = "D:/file/uploadImg/";

	public static String getProfile() {
		return profile;
	}

	public static void setDirPath(String profile) {
		this.profile = profile;
	}

	
			
}

posted on 2021-11-16 14:11 大渔33 阅读(1806) 评论(0) 收藏举报