上传图片(创建临时目录)

思路分析

前端点击上传按钮，弹出上传选择框，选中图片后触发对应方法，向后端传递图片数据；

前端图片部分根据 “源图片文件目录”显示图片；

后端获取图片的原名字，设置图片新名字+临时文件后缀，创建新的文件夹，将图片数据存入文件夹，将新的图片目录传回前端，存入一个隐藏的表单中，用于最后添加使用；

前端所有数据都填完数据，点击确认添加后，后端添加方法中找到新增图片路径，将图片名的临时文件后缀删除，将修改后的图片路径存入数据库即完成上传图片

pom文件导入依赖包

<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.1</version>
</dependency>
<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.4</version>
</dependency>

修改springmvc.xml

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <!--上传文件的最大大小  这里为5M-->
    <property name="maxUploadSize" value="5242880"></property>
    <!--上传文件的编码-->
    <property name="defaultEncoding" value="UTF-8"></property>
</bean>

前端页面

在这里插入图片描述

<div class="row">
    <div class="form-group">
        <div class="col-md-8 col-md-offset-3">
            <div
                 style="border: 2px dotted #C0C0C0; height: 195px; width: 150px;">
                <img src="../images/users/avatar.gif" height="195px"
                     width="150px" id="picture">
            </div>

        </div>
    </div>
</div>
<div class="row">
    <div class="form-group">
        <div class="col-md-4 col-md-offset-3">
            <input type="button" value="点击上传一寸照" id="btnPhoto" style="height: 40px;border-radius: 5px;"/>
        </div>
    </div>
    <input type="file" style="display: none" id="file" accept="image/png,image/jpeg"/>
    <input type="text" style="display: none" id="teacherPhoto">
</div>

//点击上传一寸照
$('#btnPhoto').click(function() {
	$('#file').trigger("click");
})
//照片上传到后台
$("#file").change(function() {
	// 获取上传文件对象
	var file = $(this)[0].files[0];
	if (file.size > 1024 * 1024 * 2) {
		alert('图片大小不能超过 2MB!');
		return false;
	}
	
	// 向后台进行传递数据
	// 该函数为储存表单数据的，而这里就头像一个文件，所以只需向该函数里添加一个数据
	var mf = new FormData();
	// 该函数采用Map的键值形式，键的名字需要和后台的接受的该值的名字一样，该值就为文件
	mf.append("mf", file);
	$.ajax({
		url:"../../teacherFile/file/uploadTeacherPhoto.do", 
        type: 'POST',
        data: mf,
        async: false,
        cache: false,
        contentType: false,
        processData: false,
		success: function (data) {
			console.log(data);
			// 隐藏的表单中设置后台传过来的图片路径
            $("#teacherPhoto").val(data.src);
			// 读取文件URL
			var reader = new FileReader();
			reader.readAsDataURL(file);
			// 阅读文件完成后触发的事件  src=${ctx}/file/downloadShowFile.action?path="+d.carimg+"
			reader.onload = function() {
				// 读取的URL结果：this.result
				$("#picture").attr("src", this.result);// avatar_img img标签的ID
			}
		},
		error:function () {
			alert("失败");
		}
	})

});

后端上传图片

  /**
     * 教师一寸照上传
     * @param mf
     * @return
     * @throws IllegalStateException
     * @throws IOException
     */
    @RequestMapping("uploadTeacherPhoto")
    @ResponseBody
    public Map<String, Object> uploadTeacherPhoto(MultipartFile mf) throws IllegalStateException, IOException {
	// 文件上传的父目录
	String parentPath = Constast.TEACHER_PATH;
	// 得到当前日期作为文件夹名称
	String dirName = RandomUtils.getCurrentDateForString();
	// 构造文件夹对象
	File dirFile = new File(parentPath, dirName);
	if (!dirFile.exists()) {
	    dirFile.mkdirs();// 创建文件夹
	}
	// 得到文件原名
	String oldName = mf.getOriginalFilename();
	// 根据文件原名得到新名
	String newName = RandomUtils.createFileNameUseTime(oldName,Constast.FILE_UPLOAD_TEMP);
	File dest = new File(dirFile, newName);
	mf.transferTo(dest);
	
	Map<String, Object> map = new HashMap<>();
	map.put("src", dirName + "/" + newName);
	return map;
    }

用到的属性和方法

// 默认教师一寸照上传路径   Constast.TEACHER_PATH
String TEACHER_PATH = "D:/teacherPhoto/";

/**
	 * 得到当前日期
	 */
public static String getCurrentDateForString() {
    return sdf1.format(new Date());
}

/**
	 * 生成文件名使用时间+4位随机数+临时后缀
	 * @param fileName 文件名称
	 * @param suffix   临时文件后缀
	 */
public static String createFileNameUseTime(String fileName,String suffix) {
    String fileSuffix=fileName.substring(fileName.lastIndexOf("."),fileName.length());
    String time=sdf2.format(new Date());
    Integer num=random.nextInt(9000)+1000;
    return time+num+fileSuffix+suffix;
}

最终添加的后端业务层方法

public int addTeacher(Teacher teacher) {
    SimpleDateFormat sf = new SimpleDateFormat("yyyy-MM-dd");
    //设置教师名字 入职年份 +1001 后缀递增
    String workDate = sf.format(teacher.getWorktime()).toString().substring(0, 4);
    System.out.println(teacher.getWorktime());
    System.out.println(teacher.getTeacherPhoto());
    // 查询最后一个教师的教师编号
    Teacher teacher2 = teacherMapper.selectLastTeacher();
    if (null != teacher2) {
        int num = Integer.parseInt(teacher2.getTeacherId().substring(4));
        teacher.setTeacherId(workDate+(num+1));
    }else {
        teacher.setTeacherId(workDate+1001);
    }
    //如果不是默认图片 需要修改图片地址后缀
    if (!teacher.getTeacherPhoto().equals(Constast.PHOTO_PATHString)) {
        String photoPath = AppFileUtils.updateFileName(Constast.TEACHER_PATH,teacher.getTeacherPhoto(), Constast.FILE_UPLOAD_TEMP);
        teacher.setTeacherPhoto(photoPath);
    }
    return teacherMapper.insertSelective(teacher);
}

修改图片后缀方法

/**
     * 更改文件目录
     * @param path 最外层目录 String TEACHER_PATH = "D:/teacherPhoto/";
     * @param carimg 前端传来的图片文件目录
     * @param suffix 临时文件后缀
     * @return
     */
public static String updateFileName(String path,String carimg, String suffix) {
    // 找到文件
    try {
        File file = new File(path, carimg);
        if (file.exists()) {
            file.renameTo(new File(path, carimg.replace(suffix, "")));
            return carimg.replace(suffix, "");
        }
    } catch (Exception e) {
        e.printStackTrace();
    }
    return null;
}

原文链接：https://blog.csdn.net/qq_41154522/article/details/105156889

上传图片(创建临时目录)

思路分析

你可能也喜欢