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提交的方法 每一种方法都有它的优势和不足 ...
随机推荐
- centos7 安装 git服务器
服务器端配置 yum install -y git groupadd git useradd git -g git 2.创建authorized_keys cd /home/git mkdir .ss ...
- 【转】MCU厂商简介
国内MCU市场已达360亿元,2020年将超500亿元.2016年,国内MCU市场已达360亿元,同比增长达11%,而据IC Insights预测,随着中国大陆汽车电子和物联网领域的快速发展,对MCU ...
- kubernetes-使用Nginx配置ingress-controllers
下载 Nginx Ingress Controller 配置文件: wget https://raw.githubusercontent.com/kubernetes/ingress-nginx/ma ...
- 【转】高性能网络编程2----TCP消息的发送
在上一篇中,我们已经建立好的TCP连接,对应着操作系统分配的1个套接字.操作TCP协议发送数据时,面对的是数据流.通常调用诸如send或者write方法来发送数据到另一台主机,那么,调用这样的方法时, ...
- 资源管理与调度系统-YARN的资源调度器
资源管理与调度系统-YARN的资源调度器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 资源调度器是Hadoop YARN中最核心的组件之一,它是ResourceManager中的 ...
- 布隆过滤器(Bloom Filter)-学习笔记-Java版代码(挖坑ing)
布隆过滤器解决"面试题: 如何建立一个十亿级别的哈希表,限制内存空间" "如何快速查询一个10亿大小的集合中的元素是否存在" 如题 布隆过滤器确实很神奇, 简单 ...
- [转]Serverless实践
转载的,原文: https://www.cnblogs.com/middleware/p/9470533.html ------------------------------------------ ...
- sitemap怎么制作才适合蜘蛛抓取?
网站sitemap制作格式与要求 1.sitemap格式说明 <?xml version="1.0" encoding="utf-8"?> < ...
- python_并发编程——消费者和生产者模型
消费者和生产者模型 from multiprocessing import Process,Queue import time import random class Producer(Process ...
- 堆优化/zkw线段树优化 dijkstra
#include <bits/stdc++.h> using namespace std; const int MAXN = 100005; const int MAXM = 200005 ...