前端:
<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")
@ResponseBody
public 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("上传出错了");
} }

  

form表单提交且接口回调显示提交成功的更多相关文章

  1. form表单文件上传提交且接口回调显示提交成功

    前端: <form method="post" enctype="multipart/form-data" id="formSubmit&quo ...

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

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

  3. form表单 一个input时 回车自动提交

    问题描述 form表单中,如果当前表单只有一个input输入框时,单击回车会自动提交当前表单. 解决方案 在当前form表单中添加一个隐藏的input, <input style="d ...

  4. 【jQuery】将form表单通过ajax实现无刷新提交

    //将form转换为AJAX提交 function ajaxSubmit(url,frm,fn){ var dataPara=getFormJson(frm); $.ajax({ url:url, t ...

  5. html form表单追加input元素后在提交

    form.append(input); //input为对象 (设置name和val有效) $("#form1").submit();//提交事件

  6. 问题:做EsayUI分页报错 $(...).pagination is not a function之后我把<jsp:include page="top.jsp"/>去掉就好了,有大神知道为什么吗?另外分页按键放在那里好些,我放到form表单下,就开始显示,点一下后就没有了

    <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...

  7. input file 在开发中遇到的问题 类似ajax form表单提交 input file中的文件

    最近在做项目的过程中遇到个问题,在这里做个记录防止日后忘记 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为 ...

  8. ajax form表单提交 input file中的文件

    ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了 ...

  9. jqueryEasyUI form表单提交的一个困惑

    今天用到了jqueryEasyUI的form表单做一个增加操作的提交,想打开调试(用的是火狐)看看传的参数,但是怎么也看不到form表单提交的http请求?而且还会发送一个另外的请求! 在页面加载时, ...

随机推荐

  1. 3、const与constexpr

    初遇到constexpr真的是有点懵比,看了很多博客也没看懂,不知道是我太笨,还是别人写的太深奥?总之经过一番折腾算是入门了.一下是我个人总结,有不对的地方望指出. 一.学习const与constex ...

  2. Selenium3+python自动化016-Selenium Grid

    一.Selenium Grid介绍 1.概念 Selenium Grid组件专门用于远程分布式测试或并发测试,通过并发执行测试用例的方式可以提高测试用例的执行速度和效率,解决界面自动化测试执行速度过慢 ...

  3. 最短路-A - 畅通工程续

    A - 畅通工程续 某省自从实行了很多年的畅通工程计划后,终于修建了很多路.不过路多了也不好,每次要从一个城镇到另一个城镇时,都有许多种道路方案可以选择,而某些方案要比另一些方案行走的距离要短很多.这 ...

  4. BZOJ 3143 游走

    Description 一个无向连通图,顶点从1编号到N,边从1编号到M. 小Z在该图上进行随机游走,初始时小Z在1号顶点,每一步小Z以相等的概率随机选 择当前顶点的某条边,沿着这条边走到下一个顶点, ...

  5. STL中_Rb_tree的探索

    我们知道STL中我们常用的set与multiset和map与multimap都是基于红黑树.本文介绍了它们的在STL中的底层数据结构_Rb_tree的直接用法与部分函数.难点主要是_Rb_tree的各 ...

  6. 获取properties文件的内容

    获取properties文件的内容 public void test() throws Exception{ String resource = "application.propertie ...

  7. IDAE打包WEB项目 WAR Eclipse转IDEA项目

    接下来这里只说WEB项目打包,相信大多数都是用的WEB项目吧,关于打包WAR,真的很头痛,网上说的试了好好次都不行. 后来懂了之后,真的很简单好么,分享给大家   不要多走弯路了. 注意:   如果你 ...

  8. 牛客练习赛53 B题调和级数

    https://ac.nowcoder.com/acm/contest/1114/B 这题时间卡的比较死,多了一个快速幂的logn就过不了这题. #include<bits/stdc++.h&g ...

  9. mybatis第一天02

    mybatis第二天02 1.映射文件之输入输出映射 1.1映射文件之输入映射类型(parameterType) 1.1.1简单类型 当parameterType为简单类型时,我们只需要直接填写“in ...

  10. nginx 简单理解和配置

    1.概念 Nginx是一个高性能的HTTP和反向代理的web服务器,同时也提供了IMAP/POP3/SMTP服务,Nginx是由伊戈尔·塞索耶夫为俄罗斯访问量第二的Rambler.ru站点开发的,第一 ...