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请求?而且还会发送一个另外的请求! 在页面加载时, ...
随机推荐
- Selenium3+python自动化016-多线程
1.进程 什么是进程? 进程(Process)是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源分配和调度的基本单位,是操作系统结构的基础.在早期面向进程设计的计算机结构中,进程是程序的基 ...
- 查询避免Unknown column ‘xxx’ in ‘where clause
问题: 单从字面理解,我们很容易得出列名称不存在的结论, 但是,很多时候并不是列名出错造成的,而是由于拼凑sql语句时对字符类型数据没有用引号引起来造成的. 例子: 例如: String sql=& ...
- 阿里云Linux服务器安装Redis 完整步骤(包括处理远程连接问题)
跟随本篇文章步骤,包你成功安装并连接使用. 1.获取redis资源 wget http://download.redis.io/releases/redis-4.0.8.tar.gz 2.解压 tar ...
- Graph Regularized Feature Selection with Data Reconstruction
Abstract • 从图正则数据重构方面处理无监督特征选择: • 模型的思想是所选特征不仅通过图正则保留了原始数据的局部结构,也通过线性组合重构了每个数据点: • 所以重构误差成为判断所选特征质量的 ...
- centos7搭建天兔
如果新系统尚未安装工具pip,可通过以下三步快速安装pip 1. yum -y install epel-release 2. yum -y ...
- [AHOI2002] 芝麻开门 - 数论
求 \(n^k\) 的因子和, \(n \leq 2^{16}, k \leq 20\) Solution \[\prod_i \frac{p_i^{q_ik+1}-1}{p_i-1}\] #incl ...
- nginx配置之后接口状态200,但是无返回数据问题小记
nginx配置可能有问题.导致nginx不能解析PHP文件,检测nginx里对于php的配置信息. location ~ \.php$ { fastcgi_pass 127.0.0.1:9000; f ...
- Github中进行fork后,原仓库更新了如何与原仓库同步
我们经常在Github中Fork别人优秀的项目(在自己的GitHub下面生成一个repository),如果原仓库作者或组织更新仓库,此时你Fork的项目并不会更新,如果我们想要更新操作,该如何操作? ...
- Oracle11g配置监听
步骤 1.在windows系统上安装好Oracle后,点击右下角开始菜单Oracle目录下选择Net Manager进行配置,也可以使用Net Configuration Assistant(建议使用 ...
- HttpModule介绍
https://cloud.tencent.com/developer/article/1347498 引言 Http 请求处理流程 和 Http Handler 介绍 这两篇文章里,我们首先了解了H ...