下载FileInput.js

    

    http://plugins.krajee.com/file-input/demo

    https://github.com/kartik-v/bootstrap-fileinput

 

页面代码

添加FileInput JS/CSS

<form
enctype="multipart/form-data"
id="uploadForm">

    <div
id="uploadFileDiv"
hidden="true"
style="width: 60%;">

        <input
id="pdFile"
name="file"
type="file">

        <div
id="fileError"
class="help-block"></div>

        <br />

    </div>

</form>

添加JS

    $("#pdFile").fileinput({

        showPreview : false,

        allowedFileExtensions : [ "zip", "bar", "bpmn", "bpmn20.xml" ], 限制文件类型

        elErrorContainer : "#fileError",

        browseClass : "btn btn-success",

        browseLabel : "查找文件",

        browseIcon : '<i class="glyphicon glyphicon-search"></i>',

        removeClass : "btn btn-danger",

        removeLabel : "删除",

        removeIcon : '<i class="glyphicon glyphicon-trash"></i>',

        uploadClass : "btn btn-info",

        uploadLabel : "部署",

        uploadIcon : '<i class="glyphicon glyphicon-upload"></i>',

    });

 

    $("#uploadForm").submit(function(event) {

        var formData = new FormData(this); 这里用的是this,如果是Form的话需要Form[0]

        event.preventDefault(); 阻止当前提交事件,自行实现,否则会跳转

        var grid = $('[data-role="pdGrid"]');

        $.ajax({

            url : contextPath + '/activiti/pd/upload.koala',

            type : 'POST',

            data : formData,

            contentType
: false, 这两个参数需要被定义,否则报错

            processData
: false,

            success : function(data) {

                if (data.result == 'success') {

                    grid.message({

                        type : 'success',

                        content : '部署成功'

                    });

                    $("#uploadFileDiv").slideToggle("slow");

                    grid.grid('refresh');

                } else {

                    grid.message({

                        type : 'error',

                        content : data.result

                    });

                }

            },

            error : function() {

                grid.message({

                    type : 'error',

                    content : '部署失败'

                });

            }

        });

    });

 

后台代码

    @ResponseBody

    @RequestMapping("/upload")

    public Map<String, Object> uploadFile(@RequestParam
MultipartFile file)

    {

        Map<String, Object> dataMap = Maps.newHashMap();

        String fileName = file.getOriginalFilename();

        try

        {

            InputStream fileInputStream = file.getInputStream();

XXXXXXXXXXXXXX

        } catch (Exception e)

        {

            dataMap.put("result", "部署流程时发生错误");

            e.printStackTrace();

        }

        dataMap.put("result", "success");

        return
dataMap;

    }

 

Spring.xml

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" />

 

运行效果

 


 


 

点击【部署】,实现无刷新提交form,并且刷新当前页的效果


 

Bootstrap FileInput.js + springmvc uploadFile的更多相关文章

  1. Bootstrap fileinput.js,最好用的文件上传组件

    本篇介绍如何使用bootstrap fileinput.js(最好用的文件上传组件)来进行图片的展示,上传,包括springMVC后端文件保存. 一.demo   二.插件引入 <link ty ...

  2. BootStrap fileinput.js文件上传组件实例代码

    1.首先我们下载好fileinput插件引入插件 ? 1 2 3 <span style="font-size:14px;"><link type="t ...

  3. ***Bootstrap FileInput插件的使用经验汇总

    插件下载地址: https://github.com/kartik-v/bootstrap-fileinput/ 官方DEMO查看: http://plugins.krajee.com/file-ba ...

  4. Spring Boot+BootStrap fileInput 多图片上传

    一.依赖文件 <link rel="stylesheet" type="text/css" th:href="@{/js/bootstrap/c ...

  5. bootstrap+fileinput插件实现可预览上传照片功能

    实际项目中运用: 功能:实现上传图片,更改上传图片,移除图片的功能 <!DOCTYPE html> <html> <head> <meta charset=& ...

  6. JS组件系列——Bootstrap文件上传组件:bootstrap fileinput

    前言:之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种扁平化的风格有点着迷了.前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签, ...

  7. JS文件上传神器bootstrap fileinput详解

    Bootstrap FileInput插件功能如此强大,完全没有理由不去使用,但是国内很少能找到本插件完整的使用方法,于是本人去其官网翻译了一下英文说明文档放在这里供英文不好的同学勉强查阅.另外附上一 ...

  8. bootstrap fileinput +springmvc图片上传-krajee

    引入的文件 <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.9/css/filei ...

  9. bootstrap插件fileinput.js 出现出现$("#xxxx").fileinput({}); 不生效的情况解决

    如果出现$("#xxxx").fileinput({}); 不生效的情况请将fileinput.js中最后几行注释掉: /* $(document).ready(function ...

随机推荐

  1. 如何在vue-cli 中适当的配置,来满足自己项目需求 ?

    1. 改变index.js 中端口号host host:'localhost' 改为 host: '0.0.0.0' 然后换成自己的ip 访问: 2. 在vue 中运行cnpm run start 中 ...

  2. Pregel的应用实例——单源最短路径

  3. 从零开始搭建系统2.5——Apollo安装及配置

    参见https://github.com/ctripcorp/apollo/wiki/Quick-Start安装即可

  4. Eureka注册中心是什么?

    Eureka注册中心是什么? Eureka注册中心是什么? Eureka是Netflix开发的服务发现组件,本身是一个基于REST的服务.Spring Cloud将它集成在其子项目spring-clo ...

  5. BCZM : 1.15

    数独 解法一:广度优先搜索. 解法二:先填满中间矩阵,其他区域通过矩阵置换求出.

  6. quartz的使用(二.基本过程)

    1.关于各个要素的创建,SchedulerFactoryBean,CronTriggerFactoryBean及JobDetailFactoryBean全部实现spring中的FactoryBean& ...

  7. delphi xe10 麦克风、摄像头操作

    TakePhotoFromCameraAction1: TTakePhotoFromCameraAction; // 通过手机摄像头获取图片TakePhotoFromLibraryAction1: T ...

  8. GDI+图像与GDI位图的相互转换

    Delphi的TBitmap封装了Windows的GDI位图,因此,TBitmap只支持bmp格式的图像,但是在Delphi应用程序中,常常会遇到图形格式的转换,如将Delphi位图TBitmap的图 ...

  9. 秒懂机器学习---k-近邻算法实战

    秒懂机器学习---k-近邻算法实战 一.总结 一句话总结: k临近算法的核心就是:将训练数据映射成k维空间中的点 1.k临近算法怎么解决实际问题? 构建多维空间:每个特征是一维,合起来组成了一个多维空 ...

  10. python入门 元组tuple (三)

    什么if while语句了 列表字典都太简单了 ,我直接跳过了, 开始写tuple了 增 元组格式是写在括号里,注意与列表(写在中括号里)的区别 tup1 = ('math', 'beijing', ...