栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Java

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

Java 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

Java的SSM框架结合AJAX实现图片上传并不难 第一步:maven的pom.xml引入jar包(如果没用maven,自己可以去maven仓库下载)

	commons-io
	commons-io
	2.4


	commons-fileupload
	commons-fileupload
	1.3.1

第二步:配置SpringMVC.xml配置文件(具体不一定是SpringMVC.xml,看你哪个xml文件用来配置SpringMVC框架的)

	
	
	
	

第三步:编写处理图片上传的方法(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();
        }
    }
}
第四步:编写页面表单
学号:
姓名:
照片:
第五步:编写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!分享一波用法!不会的给我私信或者回复留言!
觉得有帮助的可以关注一波!经常分享编程踩坑经验!

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/318209.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号