ssm中文件的上传（ajax html 头像上传案例）——小马同学@Tian

最新推荐文章于 2024-10-15 10:53:41 发布

原创最新推荐文章于 2024-10-15 10:53:41 发布 · 346 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#jquery #upload #java #html #json

本文详细介绍了使用Spring MVC和AJAX进行前端文件上传的步骤，包括配置视图解析器、HTML表单设置、jQuery的ajaxSubmit以及Controller层处理文件上传并保存到数据库。同时涉及了如何将上传后的文件路径存入数据库并设置img标签src属性。

1. 文件的上传（ajax）

1.1 上传流程分析（头像上传案例）

1.需要新建虚拟路径！！！
2.Controoler做了两件事情：第一件事情把/upload/1.jpg 放到数据库中
第二件事情：必须把文件传入到本地磁盘的upoload文件夹中，因为这个文件夹就是虚拟路径
3.img标签的src的值，应该从数据库中取出来， 赋值给src属性
Src=”/upload/1.jpj” 虚拟路径  http:localhots:8080/upload/1.jpj
注：路径可根据自己喜欢定义

其实前四步和jsp上传都大体相同，熟悉的同学可直接去1.5

1.2 导入的jar包

所需jar包：
commons-fileupload-1.2.1.jar
commons-io-1.4.jar
导入方式如下，复制粘贴至pom.xml中

<dependency>
    <groupId>commons-fileupload</groupId>
     <artifactId>commons-fileupload</artifactId>
     <version>1.3.3</version>
</dependency>

1.3 配置视图解析器

在spring-mvc中进行配置，限定图片上传的大小

<!-- 文件上传的解析器  id的值不能改-->
   <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
   		<!-- 上传文件的最大大小 ，单位字节 ，比如 1024 * 1024 = 1M-->
   		<property name="maxUploadSize" value="1048576"></property>
   </bean>

1.4 html中form表单的属性

注意配置以下属性：
method=”post”
enctype=”multipart/form-data”
注意：file控件的name属性值
配置效果如下所示：


<form action="upload" method="post" enctype="multipart/form-data">

	<input type="text" name="uname"/><br/>
	<input type="file" name="upfile"/><br/>
	<input type="submit" value="submit"/>
</form>

1.5 jquery实现ajax文件上传

采用序列化进行文件的上传，需使用到一下js文件
注意事项：
<script src="js/jquery-1.12.2.min.js" type="text/javascript"></script>
<script src="js/jquery.form.min.js" type="text/javascript"></script>
上下位置不可换

<script src="js/jquery-1.12.2.min.js" type="text/javascript"></script>
<script src="js/jquery.form.min.js" type="text/javascript"></script>

<script>
    $("form").submit(function () {
        $("form").ajaxSubmit({
            type:"post",
            url:"user/upload",
            dataType:"json",
            data:$("form").serialize(),
            success:function (data) {
                alert(data.info);
                // top.location.reload();
            }
        })
    })
</script>

1.6 控制器（controller层）实现

jackjson支持下：@ResponseBody
注意：
@RequestParam MultipartFile

    @RequestMapping("/upload")
    @ResponseBody
    public JsonResult upload (@RequestParam MultipartFile upload, HttpSession session) {
        String uploadName = System.currentTimeMillis() + upload.getOriginalFilename();

        String dir = "E:/upload";
        File file = new File(dir);

        if (!file.exists()) {
            file.mkdirs();
        }

        file = new File(dir, uploadName);

        try {
            upload.transferTo(file);
        } catch (IOException e) {
            e.printStackTrace();
        }
        User user = (User)session.getAttribute("user");
        User edit = new User();
        edit.setUid(user.getUid());
        edit.setImgPath("/upload/" + uploadName);
        userService.editImgPath(edit);

        user.setImgPath("/upload/" + uploadName);
        session.setAttribute("user",user);

        return "(/"code/":1,/"info/":/"成功/")";
    }