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>

|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
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 防止表单重复提交,刷新页面。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
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表单文件上传提交且接口回调显示提交成功的更多相关文章
- Ajax(form表单文件上传、请求头之contentType、Ajax传递json数据、Ajax文件上传)
form表单文件上传 上菜 file_put.html <form action="" method="post" enctype="multi ...
- SSM+form表单文件上传
这里介绍SSM如何配置上传文件 配置springmvc.xml: <!--配置上传下载--> <bean id="multipartResolver" class ...
- form表单文件上传 servlet文件接收
需要导入jar包 commons-fileupload-1.3.2.jar commons-io-2.5.jar Upload.Jsp代码 <%@ page language="jav ...
- 通过HttpClient4.5模拟Form表单文件上传
public static void main(String[] args) { CloseableHttpClient httpclient = HttpClients.createDefault( ...
- 基于Spring3 MVC实现基于form表单文件上传
http://blog.csdn.net/jia20003/article/details/8474374/
- Django---CBV和FBV的使用,CBV的流程,给视图加装饰器,Request对象方法,属性和Response对象,form表单的上传
Django---CBV和FBV的使用,CBV的流程,给视图加装饰器,Request请求对象方法,属性和Response响应对象,form表单的上传 一丶CBV和FBV 在Django中存 ...
- 表单文件上传,ajax文件上传
原创链接:http://www.cnblogs.com/yanqin/p/5345562.html html代码 index.jsp(表单文件上传) <form action="sh ...
- 混合表单文件上传到数据库(基于TOMCAT)
在实际的开发中在实现文件上传的同时肯定还有其他信息需要保存到数据库,就像混合表单在上传完毕之后需要将提交的基本信息插入数据库. 在这个demo中需要用到这个架包来帮助实现 1.定义一个公共类实现文件上 ...
- Ajax serialize()提交form表单不能上传file类型
前台form表单的提交方式有很多种,例如: 1. form表单submit直接提交的方法 2. Ajax提交的方法 3. jquery提交的方法 4. 原生js提交的方法 每一种方法都有它的优势和不足 ...
随机推荐
- Docker安装与部署
安装Docker: 查看你当前的内核版本: uname -r 更新yum包: sudo yum update 卸载旧版本(如果安装过旧版本的话): sudo yum remove docker doc ...
- Vue.js源码中大量采用的ES6新特性介绍:模块、let、const
1 关于ES6 ECMAScript6(以下简称ES6)是JavaScript语言的最新一代标准,发布于2015年6月,因为ECMA委员会决定从ES6起每年更新一次标准,因此ES6被改名为E ...
- c# IComparable与IComparer接口
- python获取第前多少天的日期
1. 显示昨天(前一天)的日期 from datetime import date, timedelta yesterday_date = (date.today() + timedelta(days ...
- altium designer(AD13)隐藏敷铜的方法
覆铜,就是将PCB上闲置的空间作为基准面,然后用固体铜填充,这些铜区又称为灌铜.敷铜的意义在于,减小地线阻抗,提高抗干扰能力;降低压降,提高电源效率;还有,与地线相连,减小环路面积. 如果拿到别人的P ...
- IDEA快速搭建WEB项目【记录篇】
这里用的都是市面上通用的技术,而每个公司都有自己的调用方式,可以根据实际情况与业务场景不同去进行变通 三层架构: 界面层(User Interface layer).业务逻辑层(Business Lo ...
- Springboot中自已测试
签到的测试,需要传入日期,签到7天可获得更多的积分, 构造7天前的签到记录,重写签到方法,进行构造数据 import cn.com.acxiom.coty.api.ws.bean.dto.PointD ...
- linux系统编程之进程(一)
今天起,开始学习linux系统编程中的另一个新的知识点----进程,在学习进程之前,有很多关于进程的概念需要了解,但是,概念是很枯燥的,也是让人很容易迷糊的,所以,先抛开这些抽象的概念,以实际编码来熟 ...
- 运行Vue项目,没办法自动打开浏览器,提示“Unable to open browser. If you are running in a headless environment, please do not use the open flag.”
留坑,待解决 Unable to open browser. If you are running in a headless environment, please do not use the o ...
- 任何人都适合的常用Chrome插件(工欲善其事必先利其器)
1.划词翻译 介绍链接:http://t.cn/RqpoGU4 下载地址: Chrome 应用商店(请翻墙). 下载 .crx 安装包手动安装 功能如下: - 支持几乎所有语言的翻译与阅读,并且同时支 ...