前端:
<form method="post" enctype="multipart/form-data" id="formSubmit"><div class="row"><div class="col-lg-12" style="padding-left:25px;padding-top: 5px"><label>请选择文件</label><input type="file" name="file" title="点击选择文件" multiple="" accept="*/*" class="form-control"></div></div><div class="row"><div style="padding-left:25px;padding-top:10px"><input type="submit" class="btn btn-primary"></div></div>
</form>

JS:
$('#formSubmit').submit(function (event) {//首先验证文件格式var fileName = $(this).find("input[name=file]").val();if (fileName === '') {alert('请选择文件');return;}// mulitipart form,如文件上传类var formData = new FormData(this);$.ajax({async: false,type: "POST",url: "/upload",data: formData,dataType: "JSON",mimeType: "multipart/form-data",contentType: false,cache: false,processData: false,success: function (data) {if (data.success) {layer.alert("上传成功")} else {layer.alert(data.error)}}});return false;});

  js代码的最后需要return false 防止表单重复提交,刷新页面。

java:@RequestMapping(value = "/upload", method = RequestMethod.POST, produces = "application/json;charset=utf-8")@ResponseBodypublic SimpleAjaxResponse uploadSingleFile(HttpServletRequest request, Model model) {try {DefaultMultipartHttpServletRequest httpServletRequest = (DefaultMultipartHttpServletRequest) request;MultipartFile multipartFile = httpServletRequest.getFile("file");return new SimpleAjaxResponse(true);} catch (Exception e) {LOGGER.error(e.getMessage(), e);e.printStackTrace();return new SimpleAjaxResponse("上传出错了");}}

  

转载于:https://www.cnblogs.com/yang-xiansen/p/11205861.html

form表单提交且接口回调显示提交成功相关推荐

  1. 前端问题:button按钮在form表单的时候会当成submit提交

    button按钮在form表单的时候会当成submit提交 input type="button" PS:遇到了一个坑是,button按钮在form表单的时候会当成submit提交 ...

  2. Form表单method属性的两种提交方式Get和Post的区别

    Mothod属性是控制表单的提交方式的. 表单提交方式有两种:post方式的提交,get方式提交(默认的方式). 两者的区别: 1.get方式的提交,表单元素对应的值会以?key=value& ...

  3. form表单file,select选择后自动提交

    form表单file.select选择后自动提交 1.input type="file"控件自动提交,常用于修改用户图片等处.(注:post,get方式都行) <?php i ...

  4. form表单与ajax的两种提交方式

    一.form表单与ajax两种提交方式使用的场景: 1)form表单提交适用于跳转到另一个页面,form标签中的数据通过submit的方式提交到后台,提交成功后会跳转到另一个页面,但没有返回值. 2) ...

  5. 如何让form表单在enter键入时不提交

    今天在做我的一个小玩意 在线聊天工具的时候 form表单只有一个text和一个button每当我键入enter的时候就刷新.很是郁闷,直接在form上onsumbit=false.才行. 下面是我查询 ...

  6. 微信小程序 form表单 开关 多选 单选 输入框 提交

    <!--这里用form,name="nameName1"可以作为form的属性进行 (e.detail.value.nameName1)调用, form自带有提交和重置按钮, ...

  7. from提交ajax,form表单提交与ajax消息传递

    form表单提交与ajax消息传递 1.前后端传输数据编码格式contentType: urlencoded 对应的数据格式:name=xxx&password=666 后端获取数据:requ ...

  8. Request对象接收Form表单提交

    转自:http://www.cnblogs.com/xdp-gacl/p/3798347.html Form表单: <title>HTML的form表单</title> < ...

  9. form表单input使用disabled后提交不能获取表单值的解决方法

    今天遇到一个问题:在form表单中的input上使用disabled禁用标致,会导致表单提交时获取不到值.经过调试,以及参考相关博文,最终得以解决,下面记录解决方法. form表单输入框input设置 ...

最新文章

  1. Java线程-线程八锁
  2. 勒索病毒爆发 中国多家校园网发紧急通知提醒防范
  3. WWW2020推荐系统论文合集(已分类整理,并提供下载)
  4. #1117. 编码 ( 字典树版 ) 题解分析
  5. POJ 3259 Wormholes【最短路/SPFA判断负环模板】
  6. 单片机为什么一直用C语言,不用其他编程语言?只有学过的知道!
  7. 使用Java框架Pronghorn编写快速的应用程序
  8. 2017.9.26 于神之怒加强版 失败总结
  9. 测得怎么样了?作为一名软件测试员,工作有时候似乎挺苦逼的,我太难了……
  10. iphone开机白苹果_「手机维修自学教程」苹果6PLUS的DFU模式故障维修技巧思路决定速度...
  11. JavaScript闭包函数的理解
  12. mysql 分表查询外连接_SQL多表连接查询实例(内连接外连接)
  13. 设计模式(五) 注解方式实现AOP
  14. 世界再大,大不过一盘番茄炒蛋
  15. 2015062207 - 小诗一首(勉励自己)
  16. QQ空间无敌装逼,复制下面的任一代码粘贴即可出现意想不到的图案。
  17. win7 安装SQL Server2008R2 提示文件格式错误的处理
  18. 提示BeanPostProcessorChecker:is not eligible for getting processed by all BeanPostProcessors的原因
  19. Uglifyjs入门
  20. shell脚本案例30个带详细解析

热门文章

  1. mysql 多表 left join_MySql left join 多表连接查询优化语句
  2. open小将java下载_OPEN YOUR DREAM_OPEN小将_高音质在线试听_OPEN YOUR DREAM歌词|歌曲下载_酷狗音乐...
  3. canvas宽高设置
  4. 第9周测验-鸣人和佐助
  5. 以计算机专业为主的活动,院系宣传 | 计算机科学与技术系:以梦为码
  6. 【Nginx学习01】--Nginx的安装
  7. m4a html 播放器,HTML5 Audio m4a
  8. 用HTML+CSS简单仿制了一个bilibili电脑界面⚆_⚆(做着玩的)
  9. 资源受限的移动边缘计算系统中计算卸载问题研究
  10. 解析S2B2C模式的典型特征,应用S2B2C商城助力医疗器械企业快速发展