码迷,mamicode.com
首页 > Web开发 > 详细

Ajax上传文件

时间:2017-11-13 00:10:19      阅读:245      评论:0      收藏:0      [点我收藏+]

标签:att   成功   update   adp   string   contex   联系   文件上传   session   

简述

    本文的目的主要是用户上传文件至服务器时,异步上传,不用刷新页面。


 


1
$("#saveArea").click(function () { 2 // 获得上传文件DOM对象,根据已有表单创建formdata 3 var formData = new FormData($("#uploadForm")[0]); 4 $.ajax({ 5 url: ‘${pageContext.request.contextPath }/user/updateUserHeadPortrait‘, 6 type: ‘POST‘, 7 data: formData, 8 contentType: false, 9 processData: false, 10 success: function (data) { 11 var result = data.split(‘#‘)[0]; 12 if (result == "修改成功!") { 13 alert(‘success‘); 14 } else { 15 alert(result); 16 } 17 } 18 }); 19 })

 解释:

    1.用户点击保存按钮,根据页面form的id获得表单,再根据表单创建formdata。

    2.将formdata传至后台即可。

后台代码

@RequestMapping("updateUserHeadPortrait")
@ResponseBody
public Object updateUserHeadPortrait(MultipartFile headPortrait, HttpSession session) throws IOException {
    Users users = (Users) session.getAttribute("user");
    String filename = users.getuUid()+"_"+headPortrait.getOriginalFilename();                                                       //文件名称
    String realPath = session.getServletContext().getRealPath("img/userHeadPortrait");                       //绝对路径
    String type = headPortrait.getContentType();                                                                //文件类型
    File file = new File(realPath, filename);
    if ("image/png".equals(type) || "image/jpg".equals(type) || "image/jpeg".equals(type)) {
        headPortrait.transferTo(file);                                                    //将图片保存到本地
        if (userServiceImap.updateUserHeadPortrait(users, filename)) {
            users.setuTitleImg(filename);
            session.setAttribute("user", users);
            return JSON.toJSONString("修改成功!#"+filename);
        } else {
            return JSON.toJSONString("修改失败,请联系技术支持#");
        }
    } else {
        return JSON.toJSONString("修改失败,请检查文件类型#");
    }
}

 

解释:

    和普通的文件上传一样的。注意参数名称要和页面上面input的name一样。

 

Ajax上传文件

标签:att   成功   update   adp   string   contex   联系   文件上传   session   

原文地址:http://www.cnblogs.com/gaofei-1/p/7823324.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!