前端:
<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. 二十三、mysql索引管理详解

    一.索引分类 分为聚集索引和非聚集索引. 聚集索引 每个表有且一定会有一个聚集索引,整个表的数据存储在聚集索引中,mysql索引是采用B+树结构保存在文件中,叶子节点存储主键的值以及对应记录的数据,非 ...

  2. Python学习日记(二十五) 接口类、抽象类、多态

    接口类 继承有两种用途:继承基类的方法,并且做出自己的改变或扩展(代码重用)和声明某个子类兼容于某基类,定义一个接口类interface,接口类中定义了一些接口名(就是函数名)且并未实现接口的功能,子 ...

  3. 4.kafka API producer

    1.Producer流程首先构建待发送的消息对象ProducerRecord,然后调用KafkaProducer.send方法进行发送.KafkaProducer接收到消息后首先对其进行序列化,然后结 ...

  4. 04 -- 元类和ORM

    本篇主要介绍元类,为什么说一切皆对象:如何动态的创建类等:以及ORM,即什么是ORM等知识 一.元类 1.1 在Python中一切皆对象 在学习元类中我们首先需要了解一个概念-- python中一切皆 ...

  5. 运维开发笔记整理-URL配置

    运维开发笔记整理-URL配置 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.URL路由 对于高质量的Web应用来说,使用简洁,优雅的URL的路由是一个非常值得重视的细节.Dja ...

  6. Redis基于主从复制的RCE 4.x/5.x 复现

    0x00 前言 最近期末考试,博客好久没有更新了,这段时间爆了三四个洞,趁着还没去实习,抓紧复现一下,这次复现的是Redis的RCE,复现过程中也遇到很多问题,记录下来和大家分享一下 0x01 拉取镜 ...

  7. vuex传值的使用

    1.导入vuex import Vuex from 'vuex' Vue.use(Vuex); 2.创建store实例 let store = new Vuex.Store({ state:{ cou ...

  8. 深度学习算法 之DCGAN(写得不系统,后期再总结,大家可简单阅览一下)

    目录 1.基本介绍 2.模型 3.优缺点/其他 参考 1.基本介绍 DCGAN是生成对抗网络GAN中一种常见的模型结构.其中的生成器和判别器都是神经网络模型. GAN是一种生成式对抗网络,即通过对抗的 ...

  9. 超全整理!Linux shell及常用36类命令汇总

    本文采编自http://blog.csdn.net,作者为ZHXGXN,版权归作者所有! 使用Linux shell是一些程序员每天的基本工作,但我们经常会忘记一些有用的shell命令和技巧.当然,命 ...

  10. Python 冒泡排序只适用位数相同,位数不同用a.sort()方法

    数组内容双位数排序: #coding:utf-8 print u"中文" a = ['] b = 0 c = 0 print a i =0 for j in range (len( ...