分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 软件开发

Ajax上传文件

发布时间:2023-09-06 01:24责任编辑:沈小雨关键词:Ajax

简述

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



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")@ResponseBodypublic 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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved