form表单提交且接口回调显示提交成功
前端:
<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表单提交且接口回调显示提交成功的更多相关文章
- form表单文件上传提交且接口回调显示提交成功
前端: <form method="post" enctype="multipart/form-data" id="formSubmit&quo ...
- 如何让form表单在enter键入时不提交
今天在做我的一个小玩意 在线聊天工具的时候 form表单只有一个text和一个button每当我键入enter的时候就刷新.很是郁闷,直接在form上onsumbit=false.才行. 下面是我查询 ...
- form表单 一个input时 回车自动提交
问题描述 form表单中,如果当前表单只有一个input输入框时,单击回车会自动提交当前表单. 解决方案 在当前form表单中添加一个隐藏的input, <input style="d ...
- 【jQuery】将form表单通过ajax实现无刷新提交
//将form转换为AJAX提交 function ajaxSubmit(url,frm,fn){ var dataPara=getFormJson(frm); $.ajax({ url:url, t ...
- html form表单追加input元素后在提交
form.append(input); //input为对象 (设置name和val有效) $("#form1").submit();//提交事件
- 问题:做EsayUI分页报错 $(...).pagination is not a function之后我把<jsp:include page="top.jsp"/>去掉就好了,有大神知道为什么吗?另外分页按键放在那里好些,我放到form表单下,就开始显示,点一下后就没有了
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...
- input file 在开发中遇到的问题 类似ajax form表单提交 input file中的文件
最近在做项目的过程中遇到个问题,在这里做个记录防止日后忘记 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为 ...
- ajax form表单提交 input file中的文件
ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了 ...
- jqueryEasyUI form表单提交的一个困惑
今天用到了jqueryEasyUI的form表单做一个增加操作的提交,想打开调试(用的是火狐)看看传的参数,但是怎么也看不到form表单提交的http请求?而且还会发送一个另外的请求! 在页面加载时, ...
随机推荐
- linux学习之编译-链接
在Windows下使用习惯了IDE,导致我们对程序的编译链接没有一个清晰的认识,甚至混淆了编辑器和编译器的概念.在学习Linux时,这些问题就暴露出来了. 实际上,我们应该严格区分一个程序从产生到执行 ...
- 基于EFCore3.0+Dapper 封装Repository
Wei.Repository 基于EFCore3.0+Dapper 封装Repository,实现UnitOfWork,提供基本的CURD操作,可直接注入泛型Repository,也可以继承Repos ...
- 消息队列和Kafka
------20191211闪
- [P4450] 双亲数 - 莫比乌斯反演,整除分块
模板题-- \[\sum\limits_{i=1}^a\sum\limits_{j=1}^b[(i,j)=k] = \sum\limits_{i=1}^a\sum\limits_{j=1}^b[k|i ...
- 一步步教你如何在Ubuntu虚拟机中安装QEMU并模拟模拟arm 开发环境(一)uImage u-boot(转)
初次接触qemu是因为工作的需要,有时候下了班,可能需要在家研究一些东西,因为博主用到arm环境,这时候博主比较小气,不愿花钱买开发板,当然博主在这里给大家的建议是,如果要真正学懂arm构架的相关知识 ...
- c++踩坑大法好 typedef和模板
1,typedef字面意思,自定义一种数据类型 语法:typedef 类型名称 类型标识符; 基本用法: 1) 为基本数据类型定义新的类型名. 2) 为自定义数据类型(结构体.公用体和枚举类型)定义简 ...
- 使用VS2017创建EF框架实例
本文例子中使用环境:vs2017,sql server 2008 一,创建EF项目 1,解决方案添加.Net Framework类库项目,在新建的项目下新建项:data->ADO.NET实体数据 ...
- Codeforces Round #601 (Div. 2) C League of Leesins
把每一次输入的一组数字存下来,然后把每个数字出现的组数存下来 然后找只出现过一次的数字a,那么这个数字a不是开头就是结尾,默认为开头(是哪个都无所谓),然后去找和它出现在同一组的两个数字b和c,而b和 ...
- Outlook365(Oulook2016 或2013) 写邮件输入收件人时的推荐联系人如何清理?
· 在Outlook365(Oulook2016 或2013) 中写邮件,输入收件人邮箱地址时,会出现“最近联系人” “其他建议”等推荐的联系人,可以方便选择.如果里面有很多邮箱地址的已经无效的话, ...
- 打表法fffff
打表法: 打表前先运行一下 看一看速度 优化: O3 #pragma GCC optimize(3,"Ofast","inline") O2 #pragma ...