Java的SSM框架结合AJAX实现图片上传并不难

Java的SSM框架结合AJAX实现图片上传并不难

第一步：maven的pom.xml引入jar包（如果没用maven，自己可以去maven仓库下载）

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

第二步：配置SpringMVC.xml配置文件（具体不一定是SpringMVC.xml，看你哪个xml文件用来配置SpringMVC框架的）

<!-- 文件上传的解析器 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
	<!-- 上传图片的最大尺寸 10M-->
	<property name="maxUploadSize" value="10485760"></property>
	<!-- 默认编码 -->
	<property name="defaultEncoding" value="utf-8"></property>
</bean>

第三步：编写处理图片上传的方法（Controller）

@Controller
@RequestMapping("/file")
public class UploadController {

    //文件上传路径
    private String filePath = "C:\\upload";

    /**
     * 上传图片
     */
    @ResponseBody
    @RequestMapping("/upload") // 等价于 @RequestMapping(value = "/upload", method = RequestMethod.POST)
    public String uplaod(HttpServletRequest req, @RequestParam("file") MultipartFile file) {//1. 接受上传的文件  @RequestParam("file") MultipartFile file
        try {
            //2.根据时间戳创建新的文件名，这样即便是第二次上传相同名称的文件，也不会把第一次的文件覆盖了
            //获取文件的后缀名 .jpg
            int lastIndexOf = file.getOriginalFilename().lastIndexOf(".");
            String suffix = file.getOriginalFilename().substring(lastIndexOf);
            String fileName = System.currentTimeMillis() + suffix;
            //3.通过req.getServletContext().getRealPath("") 获取当前项目的真实路径，然后拼接前面的文件
            //String destFileName = req.getServletContext().getRealPath("") + "uploaded" + File.separator + fileName;
            String destFileName = filePath+ File.separator+fileName;
            //4.第一次运行的时候，这个文件所在的目录往往是不存在的，这里需要创建一下目录（创建到了webapp下uploaded文件夹下）
            File destFile = new File(destFileName);
            destFile.getParentFile().mkdirs();
            //5.把浏览器上传的文件复制到希望的位置
            file.transferTo(destFile);
            //6.把文件名放在model里，以便后续显示用
            return "/image/"+fileName;
        } catch (FileNotFoundException e) {
            e.printStackTrace();
            return "上传失败," + e.getMessage();
        } catch (IOException e) {
            e.printStackTrace();
            return "上传失败," + e.getMessage();
        }
    }
}

第四步：编写页面表单

<form method="post">
	<table>
		<tr>
			<td>学号：</td>
			<td><input type="text" name="stuno" id="stuno" /></td>
		</tr>
		<tr>
			<td>姓名：</td>
			<td><input type="text" name="username" id="username" /></td>
		</tr>
		<tr>
			<td>照片：</td>
			<td><input type="file" id="headFileUpload" name="headFileUpload" onchange="headFileUploadFunction();" /> <input type="text" name="head" id="head" style="display: none" /></td>
		</tr>
	</table>
</form>

第五步：编写JavaScript文件

/*上传照片*/
function headFileUploadFunction(){
	var formData = new FormData();
	formData.append("file",$("#headFileUpload").prop("files")[0]);
	$.ajax({
		url:"<%=path%>/file/upload",
		type:"post",
		data: formData,
		contentType:"application/x-www-form-urlencoded; charset=utf-8",
		async: false,
		cache: false,
		contentType: false,
		processData: false,
		success: function(data){
			console.log(data);
			$("#head").val(data);
		}
	});
}

注意看上述的这种写法

var formData = new FormData();
formData.append(“file”,$("#headFileUpload").prop(“files”)[0]);

OK！分享一波用法！不会的给我私信或者回复留言！
觉得有帮助的可以关注一波！经常分享编程踩坑经验！