前端:
<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表单文件上传提交且接口回调显示提交成功的更多相关文章

  1. Ajax(form表单文件上传、请求头之contentType、Ajax传递json数据、Ajax文件上传)

    form表单文件上传 上菜 file_put.html <form action="" method="post" enctype="multi ...

  2. SSM+form表单文件上传

    这里介绍SSM如何配置上传文件 配置springmvc.xml: <!--配置上传下载--> <bean id="multipartResolver" class ...

  3. form表单文件上传 servlet文件接收

    需要导入jar包 commons-fileupload-1.3.2.jar commons-io-2.5.jar Upload.Jsp代码 <%@ page language="jav ...

  4. 通过HttpClient4.5模拟Form表单文件上传

    public static void main(String[] args) { CloseableHttpClient httpclient = HttpClients.createDefault( ...

  5. 基于Spring3 MVC实现基于form表单文件上传

    http://blog.csdn.net/jia20003/article/details/8474374/

  6. Django---CBV和FBV的使用,CBV的流程,给视图加装饰器,Request对象方法,属性和Response对象,form表单的上传

    Django---CBV和FBV的使用,CBV的流程,给视图加装饰器,Request请求对象方法,属性和Response响应对象,form表单的上传 一丶CBV和FBV       在Django中存 ...

  7. 表单文件上传,ajax文件上传

    原创链接:http://www.cnblogs.com/yanqin/p/5345562.html html代码  index.jsp(表单文件上传) <form action="sh ...

  8. 混合表单文件上传到数据库(基于TOMCAT)

    在实际的开发中在实现文件上传的同时肯定还有其他信息需要保存到数据库,就像混合表单在上传完毕之后需要将提交的基本信息插入数据库. 在这个demo中需要用到这个架包来帮助实现 1.定义一个公共类实现文件上 ...

  9. Ajax serialize()提交form表单不能上传file类型

    前台form表单的提交方式有很多种,例如: 1. form表单submit直接提交的方法 2. Ajax提交的方法 3. jquery提交的方法 4. 原生js提交的方法 每一种方法都有它的优势和不足 ...

随机推荐

  1. Java内存模型、JVM内存结构和Java对象模型

    JVM内存结构 我们都知道,Java代码是要运行在虚拟机上的,而虚拟机在执行Java程序的过程中会把所管理的内存划分为若干个不同的数据区域,这些区域都有各自的用途.其中有些区域随着虚拟机进程的启动而存 ...

  2. [python]赶集网二手房爬虫插件【可用任意扩展】

    最近应一个老铁的要求,人家是搞房产的,所以就写了这个二手房的爬虫,因为初版,所以比较简单,有能力的老铁可用进行扩展. import requests import os   from bs4 impo ...

  3. machine learning (4)---feature scaling

    feature scaling:缩小或扩大feature的值,使所有的feature处于类似的范围,这样进行gradient descnet时更快趋向最小值.因为不同的feature的范围相差很大时, ...

  4. 做vue项目时,收集的一些有意思的功能

    1. element-ui dialog组件添加可拖拽位置 可拖拽宽高 https://segmentfault.com/a/1190000012940145

  5. LightOJ - 1311 - Unlucky Bird(相遇问题)

    链接: https://vjudge.net/problem/LightOJ-1311 题意: A bird was flying on a train line, singing and passi ...

  6. RabbitMQ交换机、RabbitMQ整合springCloud

    目标 1.交换机 2.RabbitMQ整合springCloud 交换机 蓝色区域===生产者 红色区域===Server:又称Broker,接受客户端的连接,实现AMQP实体服务 绿色区域===消费 ...

  7. 【转发】c#做端口转发程序支持正向连接和反向链接

    可以通过中转server来连接sql server,连接的时候用ip,port,不是冒号,是逗号 但试过local port 21想连接AS400的FTP却不成功...为咩涅... https://w ...

  8. learning java AWT 画图

    import javax.swing.*; import java.awt.*; import java.util.Random; public class SimpleDraw { private ...

  9. 布局 Bootstrap Table的 文本内容 垂直居中

    原文:https://blog.csdn.net/peng_hong_fu/article/details/70662979 样式(注意样式优先级): #div-component-info .tab ...

  10. 正确使用Java读写锁

    JDK8中引入了高性能的读写锁StampedLock,它的核心思想在于,在读的时候如果发生了写,应该通过重试的方式来获取新的值,而不应该阻塞写操作.这种模式也就是典型的无锁编程思想,和CAS自旋的思想 ...