前端:
<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. 字符串hash补充(模数情况下)

    字符串模板,在模数意义下的,比较好用 #include<stdio.h> typedef long long LL; /*[字符串哈希算法] 字符串哈希算法的提出,涉及到如何快速地求两个字 ...

  2. Flutter简易顶部导航

    因为在AppBar的bottom参数中返回TabBar在平板模式的对齐模式是居中的且不可调整,所有将TabBar在title中返回 import 'package:flutter/material.d ...

  3. LeetCodeTwo Sum IV 树的遍历+Hash大法好

    题意 给定一颗二叉搜索树,返回是否存在两个节点的值之和为给定值K. 思路 同Two Sum.使用Hash表解决.只是要写个树的遍历而已,选取DFS. 源码 class Solution { publi ...

  4. aws申请ec2实例后如何用root用户登录

    ec2默认禁用root用户登录,我们创建ec2实例后如何知道使用什么用户登录,有两种方法? 方法一:根据我们选择的镜像来判断用什么用户登录:镜像:centos 用户centos镜像:aws 用户:ec ...

  5. 【Unity|C#】基础篇(2)——栈与堆、值类型与引用类型

    传送门:https://www.cnblogs.com/moonache/p/6008048.html [笔记] 图1:值类型与引用类型 存储方式 > 值类型:数据直接存在栈中 > 引用类 ...

  6. [HAOI2011] 向量 - 裴蜀定理

    给你一对数a,b,你可以任意使用(a,b), (a,-b), (-a,b), (-a,-b), (b,a), (b,-a), (-b,a), (-b,-a)这些向量,问你能不能拼出另一个向量(x,y) ...

  7. USACO06DEC 牛奶模式

    题意:求最长的可重叠的 K重复子串 的长度 考虑二分长度s,转化为验证性问题. 对SA进行分组.保证组内Height最小为s.这样在组内RMQ就可以任意了,因为RMQ一定是大于S的. 只要组内元素个数 ...

  8. Mac配置环境变量时终端显示bash-3.2解决方案

    1.问题描述 (base) -bash-3.2$ vi ~/.bash_profile (base) -bash-3.2$ source ~/.bash_profile 2.解决方案 无授权转,侵权删 ...

  9. Mybatis之连接池

    一,前言 ​ 连接池有很多种,最为熟悉的比如c3p0,DBCP,druid等. ​ mybatis支持三种内置的数据源类型: Pooled:实现dataSource接口,并且使用了池的思想. UNPo ...

  10. vue自定义日期选择,类似美团日期选择,日历控件,vue日历区间选择

    一个日历的控件,基于vue的,可以日历区间选择,可用于酒店日历区间筛选,动手能力强,可以修改成小程序版本的,先上效果图 里面的颜色样式都是可以修改的 选择范围效果 话不多说,直接上干货,代码可以直接复 ...