1. 前端:
  2. <form method="post" enctype="multipart/form-data" id="formSubmit">
  3. <div class="row">
  4. <div class="col-lg-12" style="padding-left:25px;padding-top: 5px">
  5. <label>请选择文件</label>
  6. <input type="file" name="file" title="点击选择文件" multiple="" accept="*/*" class="form-control">
  7. </div>
  8. </div>
  9. <div class="row">
  10. <div style="padding-left:25px;padding-top:10px">
  11. <input type="submit" class="btn btn-primary">
  12. </div>
  13. </div>
  14. </form>
  1. JS
  2. $('#formSubmit').submit(function (event) {
  3. //首先验证文件格式
  4. var fileName = $(this).find("input[name=file]").val();
  5. if (fileName === '') {
  6. alert('请选择文件');
  7. return;
  8. }
  9. // mulitipart form,如文件上传类
  10. var formData = new FormData(this);
  11. $.ajax({
  12. async: false,
  13. type: "POST",
  14. url: "/upload",
  15. data: formData,
  16. dataType: "JSON",
  17. mimeType: "multipart/form-data",
  18. contentType: false,
  19. cache: false,
  20. processData: false,
  21. success: function (data) {
  22. if (data.success) {
  23. layer.alert("上传成功")
  24. } else {
  25. layer.alert(data.error)
  26. }
  27. }
  28. });
  29. return false;
  30. });

  js代码的最后需要return false 防止表单重复提交,刷新页面。

  1. java:
  2. @RequestMapping(value = "/upload", method = RequestMethod.POST, produces = "application/json;charset=utf-8")
  3. @ResponseBody
  4. public SimpleAjaxResponse uploadSingleFile(HttpServletRequest request, Model model) {
  5. try {
  6. DefaultMultipartHttpServletRequest httpServletRequest = (DefaultMultipartHttpServletRequest) request;
  7. MultipartFile multipartFile = httpServletRequest.getFile("file");
  8. return new SimpleAjaxResponse(true);
  9. } catch (Exception e) {
  10. LOGGER.error(e.getMessage(), e);
  11. e.printStackTrace();
  12. return new SimpleAjaxResponse("上传出错了");
  13. }
  14.  
  15. }

  

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. Selenium3+python自动化016-多线程

    1.进程 什么是进程? 进程(Process)是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源分配和调度的基本单位,是操作系统结构的基础.在早期面向进程设计的计算机结构中,进程是程序的基 ...

  2. 查询避免Unknown column ‘xxx’ in ‘where clause

    问题: 单从字面理解,我们很容易得出列名称不存在的结论, 但是,很多时候并不是列名出错造成的,而是由于拼凑sql语句时对字符类型数据没有用引号引起来造成的. 例子: 例如:  String sql=& ...

  3. 阿里云Linux服务器安装Redis 完整步骤(包括处理远程连接问题)

    跟随本篇文章步骤,包你成功安装并连接使用. 1.获取redis资源 wget http://download.redis.io/releases/redis-4.0.8.tar.gz 2.解压 tar ...

  4. Graph Regularized Feature Selection with Data Reconstruction

    Abstract • 从图正则数据重构方面处理无监督特征选择: • 模型的思想是所选特征不仅通过图正则保留了原始数据的局部结构,也通过线性组合重构了每个数据点: • 所以重构误差成为判断所选特征质量的 ...

  5. centos7搭建天兔

    如果新系统尚未安装工具pip,可通过以下三步快速安装pip              1.  yum -y install epel-release               2.  yum -y ...

  6. [AHOI2002] 芝麻开门 - 数论

    求 \(n^k\) 的因子和, \(n \leq 2^{16}, k \leq 20\) Solution \[\prod_i \frac{p_i^{q_ik+1}-1}{p_i-1}\] #incl ...

  7. nginx配置之后接口状态200,但是无返回数据问题小记

    nginx配置可能有问题.导致nginx不能解析PHP文件,检测nginx里对于php的配置信息. location ~ \.php$ { fastcgi_pass 127.0.0.1:9000; f ...

  8. Github中进行fork后,原仓库更新了如何与原仓库同步

    我们经常在Github中Fork别人优秀的项目(在自己的GitHub下面生成一个repository),如果原仓库作者或组织更新仓库,此时你Fork的项目并不会更新,如果我们想要更新操作,该如何操作? ...

  9. Oracle11g配置监听

    步骤 1.在windows系统上安装好Oracle后,点击右下角开始菜单Oracle目录下选择Net Manager进行配置,也可以使用Net Configuration Assistant(建议使用 ...

  10. HttpModule介绍

    https://cloud.tencent.com/developer/article/1347498 引言 Http 请求处理流程 和 Http Handler 介绍 这两篇文章里,我们首先了解了H ...