前端:
<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. 关于SqlServer数据库数据备份失败的问题

    当备份的失败,出现说什么应该支持多少个介质簇,但实际出现了多少介质簇,这个时候就要考虑备份的地址是不是出现问题. 首先,检查备份地址,是不是多于两个以上,那么在备份的时候应该注意,备份地址最好留一个, ...

  2. 【idea】scala&sbt+idea+spark使用过程中问题汇总(不定期更新)

    本地模式问题系列: 问题一:会报如下很多NoClassDefFoundError的错误,原因缺少相关依赖包 Exception in thread "main" java.lang ...

  3. DRF 视图初识

    from django.shortcuts import render from rest_framework.generics import ListAPIView,CreateAPIView,Up ...

  4. sudo权限

    sudo授权 给普通用户赋予部分管理员权限 /sbin/ 在此目录下的命令只有超级用户可以执行 /usr/sbin/ root身份 visudo 赋予普通用户权限命令,命令执行后和vi一样使用 用户名 ...

  5. Mysql修改binlog日志过期时间

    1.临时生效 # 查看默认设置的过期时间 show variables like "%expire_logs%"; # 设置保留15天 set global expire_logs ...

  6. 微信小程序分享朋友圈 长海报 canvas 动态高度计算

    业务场景 在微信中 小程序无法分享到朋友圈,目前大部分的解决方案都是,canvas动态绘制 生成图片后,保存到用户相册,用户进行分享照片到朋友圈,朋友圈打开图片后识别二维码进入小程序,达到分享目的 g ...

  7. ldconfig 让安装的 php 的rdkafka生效

    原文:https://www.cnblogs.com/schips/p/10183111.html linux中ldconfig的使用介绍   ldconfig是一个动态链接库管理命令,其目的为了让动 ...

  8. UVA1194 Machine Schedule[二分图最小点覆盖]

    题意翻译 有两台机器 A,B 分别有 n,m 种模式. 现在有 k 个任务.对于每个任务 i ,给定两个整数$ a_i\(和\) b_i$,表示如果该任务在 A上执行,需要设置模式为 \(a_i\): ...

  9. dt二次开发之-地区链接伪静态标签用法

    用法:开启伪静态功能,参照前台,看看哪里有按照地区浏览,然后打开对应的模块和模板,修改 <a href="{$MOD[linkurl]}search.php?areaid={$v[ar ...

  10. SPOJ - BALNUM - Balanced Numbers(数位DP)

    链接: https://vjudge.net/problem/SPOJ-BALNUM 题意: Balanced numbers have been used by mathematicians for ...