首页 > Web开发 > 详细

Ajax上传文件

时间:2017-11-12 23:52:10      阅读:279      评论:0      收藏:0      [点我收藏+]

简述

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


 


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上传文件

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!