前端:
<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. Linux命令——du

    参考:10 Useful du (Disk Usage) Commands to Find Disk Usage of Files and Directories 前言 du(Disk Usage), ...

  2. python中 "is"和"=="的区别

    python中"is"和"=="区别 在做leetcode的时候,在判断两个数据是否相等时使用了python中的is not,想着入乡随俗,既然入了python ...

  3. cnn层次

    5.1.1 输入层 ​ 输入层(Input Layer)通常是输入卷积神经网络的原始数据或经过预处理的数据,可以是图像识别领域中原始三维的多彩图像,也可以是音频识别领域中经过傅利叶变换的二维波形数据, ...

  4. 用js刷剑指offer(两个链表的第一个公共结点)

    题目描述 输入两个链表,找出它们的第一个公共结点. 牛客网链接 js代码 /*function ListNode(x){ this.val = x; this.next = null; }*/ fun ...

  5. Django之路——10 django的分页组件

    Django的分页器(paginator) view from django.shortcuts import render,HttpResponse # Create your views here ...

  6. 移动端跨平台应用开发(ios、Android、web)- Flutter 技术

    关键词:Google 出品:Dart语言:Flutter Engine引擎:响应式设计模式:原生渲染:免费并且开源 一.简介 Flutter 是谷歌2018年发布的跨平台移动UI框架.作为谷歌的开源移 ...

  7. java中List与数组的转换

    1.数组转换成List public static <T> List<T> asList(T... a) String[] arr = new String[] {" ...

  8. 浏览器缓存控制 以及 在url框中回车、F5 和 Ctrl + F5的区别

    第一部分: 浏览器缓存如何控制?   做网站,不知道缓存是什么东西怎么能行! 如何实现HTTP缓存呢? 下面我们来一步一步的探寻实现机制把. 方案一: 无缓存   说明:浏览器向服务器请求资源m.pn ...

  9. module method

    null 参考链接: https://www.cnblogs.com/lvdabao/p/5953884.html

  10. Java - 框架之 Maven

     一. 下载依赖包 mvn help:system  2. 配置下载路径到 aliy (可选) <!-- 阿里云仓库 --> <mirror> <id>alimav ...