Ajax上传文件问题(图片)
来源:互联网 发布:matlab编程与工程应用 编辑:程序博客网 时间:2024/06/07 09:08
许多web项目都需要使用表单上传文件,之前一只使用表单直接上传,今天试下使用Ajax将表单文件上传,按照之前在form中添加 enctype="multipart/form-data"不能实现上传,后折腾好久得以解决。
前台表单内容,包含text输入框和问价输入框,不需要使用enctype属性:
<form class="form-horizontal" id="fromuserud"> 姓 名 <input type="text" name="aeName" class="form-control" id="aeName_update" placeholder="请输入姓名"> 上传头像 <input type="file" name="ae_photourl"> <button type="button" id="user_update">更新</button></form>
js中ajax主要内容:
$("#user_update").click(function(){var date=$("#fromuserud")[0]; //获取表单中的值var formData = new FormData(date); //使用FormData()处理表单中的值var formData = new FormData(date); $.ajax({ url:"/userchange/"+id, //发送的URL type:"POST", //类型 data:formData, //将数据发送 async: false, //是否同步,否 cache: false, //是否缓存,否 contentType: false, //需要使用 processData: false, //需要使用 success:function(result){ //发送成功后需要执行的动作 } });});
后台控制器的代码:
@ResponseBody@RequestMapping(value = "/userchange/{aeId}", method = RequestMethod.POST)public Msg update(User user, HttpServletRequest request,@PathVariable("aeId") Integer aeId, @RequestParam(value = "ae_photourl", required = false) MultipartFile attach) { String photo = null; //定义图片存储路径 //存储图片过程 if (!attach.isEmpty()) { String path = request.getSession().getServletContext().getRealPath("static" + File.separator + "images"); String oldFileName = attach.getOriginalFilename(); String prefix = FilenameUtils.getExtension(oldFileName); int filesize = 4000000; if (attach.getSize() > filesize) { return Msg.fail(); } if ((prefix.equalsIgnoreCase("jpg")) || (prefix.equalsIgnoreCase("png")) || (prefix.equalsIgnoreCase("jpeg")) || (prefix.equalsIgnoreCase("pneg"))) { String fileName = RandomUtils.nextInt(1000000) + "." + prefix; File targetFile = new File(path, fileName); if (!targetFile.exists()) { targetFile.mkdirs(); } try { attach.transferTo(targetFile); } catch (Exception e) { return Msg.fail(); } photo = fileName; } else { return Msg.fail(); } } user.setAePhotourl(photo); userService.update(user); return Msg.success(); }
其中Msg是返回成功后的信息类。主要是注意定义方法那,
@ResponseBody
@RequestMapping(value = “/userchange/{aeId}”, method = RequestMethod.POST)
public Msg update(User user, HttpServletRequest request,@PathVariable(“aeId”) Integer aeId,
@RequestParam(value = “ae_photourl”, required = false)MultipartFile attach) {}
其中@PathVariable提取发送过来的aeId值的作用,MultipartFile处理文件需要定义。最后注意添加所需包。
阅读全文
0 0
- Ajax上传文件问题(图片)
- ajax上传文件/图片
- ajax ajaxFileUpload 文件(图片)上传
- ajax异步上传文件/图片
- ajax异步上传文件图片
- jquery ajax文件上传问题
- Iframe仿Ajax异步上传文件(图片)
- ajax图片上传及时回显图片,自己总结 + ajaxFileUpload 上传文件 以及 返回值 带 <pre> 标签问题
- php+ajax图片上传,及时文件上传 摆渡整合
- 使用Ajax时上传文件的问题
- jquery.form.js ajax上传文件问题
- ajax上传文件后台获取不到问题
- FormData解决ajax上传文件的问题及ajax跨域
- flash上传图片文件的问题
- 使用uedito文件编辑器上传图片问题
- Mvc Ajax 图片上传
- php+ajax上传图片
- ajax上传图片
- My understand of Euclidean distance in digital image processing
- Material Design风格之Snackbar
- apache
- IntelliJ IDEA里Maven默认情况下编译版本为JDK1.5
- Feel Good POJ
- Ajax上传文件问题(图片)
- phpcms pc_base::
- 高低温试验箱操作规程
- FreeSWITCH SIP网关的配置总结
- struts2的java.lang.NoSuchMethodException异常处理
- SSD/DSOD check failed :mean_values_.size() == 1 || mean_values_.size() == img_channels Specify eithe
- Cannot call sendRedirect() after the response has been committed
- readyState的五种状态详解
- vue项目中使用ueditor