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提交的方法 每一种方法都有它的优势和不足 ...
随机推荐
- MySQL Connection--使用tcpkill杀掉MySQL活跃连接
当MySQL连接被打满,连管理员也无法本地登录时,可以考虑使用tcpkill杀掉一些应用服务器创建的连接. CentOS 6安装tcpkill rpm安装包: libnids-1.24-1.el6.x ...
- Flink源码阅读(二)——checkpoint源码分析
前言 在Flink原理——容错机制一文中,已对checkpoint的机制有了较为基础的介绍,本文着重从源码方面去分析checkpoint的过程.当然本文只是分析做checkpoint的调度过程,只是尽 ...
- 网站检测空链、死链工具(Xenu)
网站常用检测空链.死链工具,Xenu是很小但是功能强大的检查网站404链接的软件,支持多线程,无需安装可直接打开使用.步骤如下: 网站的链接一般都成千上万,如果存在大量的空链接将大大的影响用户体验,怎 ...
- 你的一举一动,我可都看着!Linux超骚技巧三分钟Get
今天看到一个超级叼的linux命令,可以完整记录屏幕上的命令与输出结果. 有人问这有什么叼的,不就是保存历史操作记录吗?我看看日志也能看出来. 不不不,我要说的“完整记录”包括第几秒执行什么命令,就像 ...
- Linux命令基础4-cat命令
cat命令连接文件并打印到标准输出设备上,cat经常用来显示文件的内容,类似于下的type命令. 注意:当文件较大时,文本在屏幕上迅速闪过(滚屏),用户往往看不清所显示的内容.因此,一般用more等命 ...
- nmap 排除某端口进行扫描
--exclude-ports (Exclude the specified ports from scanning) https://nmap.org/book/man-port-specifica ...
- getchar()函数举例
#include<stdio.h>void main(){ char ch; ch=getchar(); printf("%c",ch);}
- 【Python数据挖掘】第三篇--Numpy 和 可视化
一.Numpy 数组是一系列同类型数据的集合,可以被非零整数进行索引,可以通过列表进行数组的初始化,数组也可以通过索引进行切片. Numpy提供了几乎全部的科学计算方式. # numpy 导入方式: ...
- PHP流程控制之goto语法
自 PHP 5.3.0 起,还可以使用 goto 来跳出循环. 在本章开始的章节,我们讲解到一个故事,王同学每周往返,但有一个特例:直线电机滑台 项目失败后或者集团临时除知除外,他就可以不再这么每周往 ...
- 转载 C# 开源框架(整理)
C# 开源框架(整理)http://www.cnblogs.com/gaoyuchuanIT/articles/5612268.html Json.NET http://json.codeplex.c ...