jquery使用formData上传附件到ssm框架-阿里云开发者社区

jquery使用formData上传附件到ssm框架

2023-08-23 97

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： jquery使用formData上传附件到ssm框架

简介

正常使用jquery上传附件时data传到后端的数据只能是一个对象，

而图片在数据库和bean里面都是存的字符串类型，但是后端接收的是一个文件类型，

这样就上传不到后端，为了解决这个问题，我们就使用 FormData 对象来上传附件

解决方法

配置Spring文件

不配置这个就上传不了文件，一定要配置

<!--  配置multipartResolver，用于上传文件，使用spring的CommonsMultipartResolver  -->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="maxInMemorySize" value="5000000"></property>
        <property name="defaultEncoding" value="UTF-8"></property>
    </bean>

HTML-form表单代码

enctype="multipart/form-data"一定要添加，要不上传不了附件

要上传的地方的input的type属性要改为file来上传文件，并且name属性要改的和bean不一样

<form action="/student/add" method="post" id="addForm" enctype="multipart/form-data">
        姓名：<input type="text" name="name"><br>
        家庭住址：<input type="text" name="bigname"><br>
        出生日期：<input type="text" name="riqi"><br>
        班级：<select name="gradeId">
                <option value="0">请选择</option>
                <option value="1">一年级</option>
                <option value="2">二年级</option>
                <option value="3">三年级</option>
            </select><br>
        年龄：<input type="text" name="age"><br>
        图片：<input type="file" id="tupianURL" name="tupianURL"><br>
        <input type="submit" value="添加">
    </form>

jquery代码

创建 FormDate 对象来把数据上传到后端，要指定一个form，会获取到form中的数据

切记ajax中 processData: false和contentType: false 一定要记得添加，不添加的话会跳转页面

$("#addForm").submit(function (){
        var formData = new FormData(document.getElementById("addForm"));
        $.ajax({
            url:"/student/add",
            type:"post",
            data:formData,
            dataType:"json",
            processData: false,
            contentType: false,
            success:function (data){
                if (data>=1){
                    alert("添加成功");
                }else {
                    alert("添加失败");
                }
            }
        })
        return false;
    })

Controller后端代码

要确保webapp中创建的有这个路径

    @RequestMapping("/add")
    @ResponseBody
    public String add(Student student,MultipartFile tupianURL,HttpServletRequest request){
        if (tupianURL.getSize()>0) {//判断上没上传文件
            String fileType=tupianURL.getOriginalFilename();
            int index=fileType.lastIndexOf(".");
            fileType=fileType.substring(index);
            String path=request.getSession().getServletContext().getRealPath("static"+ File.separator+"uploadfiles");
            long filename=System.currentTimeMillis();//获取当前时间时间戳
            File file=new File(path+"\\"+filename+fileType);
            try {
                tupianURL.transferTo(file);
            } catch (IOException e) {
                e.printStackTrace();
            }
            student.setTupian(filename+fileType);
        }
        int count=studentService.addStudent(student);
        String result=JSON.toJSONString(count);
        return result;
    }