Bootstrap FileInput.美洲杯赌球:js springmvc uploadFi

下载FileInput.js

    美洲杯赌球 1

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

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

 

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

页面代码

添加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 ></i>',

        removeClass : "btn btn-danger",

        removeLabel : "删除",

        removeIcon : '<i ></i>',

        uploadClass : "btn btn-info",

        uploadLabel : "部署",

        uploadIcon : '<i ></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 : '部署失败'

                });

            }

        });

    });

 

美洲杯赌球 2

后台代码

    @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" />

 

引言:

运行效果

 

美洲杯赌球 3

 

美洲杯赌球 4

 

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

美洲杯赌球 5

 


一个强化的HTML5 文件输入插件,适用于Bootstrap 3.x。本插件对多种类型的文件提供文件预览,并且提供了多选等功能。本插件还提供给你一个简单的方式去安装一个先进的文件选择/上传控制版本去配合Bootstrap CSS3样式。通过对很多种文件提供预览支持,比如图片,文本,html,视频,声音,flash和对象,它大大增强了文件输入的功能。另外,它还包含基于AJAX的上传,拖拽,移除文件的功能,可视化的上传进度条,和可选择的添加或删除文件预览功能。

提示:本插件致力于使用大量在添加jquery下的css3和html5功能,强调:你可能会发现css3或html5或它两个的混合在许多实现中被需要。

本插件最早受一篇博文和Jasny'sFile Input plugin启发。但是本插件现在已经添加的好多功能和强化,为开发者提供了一个成熟并且完整的文件管理工具和解决方案。

伴随着4.0.0版本的发布,本插件现在支持被多种现代化浏览器支持的,基于Ajax,利用html5 Formdata和XHR2协议的上传。而且她也拥有了对在服务器端基于AJAX的文件删除原生内置支持。因此它可以添加更加强大的功能,联机添加、移除文件。本插件也对大多数现代浏览器添加了拖拉,移除支持。它也已经为Ajax上传提供原生支持。万一,浏览器不支持FormData或XHR2,本插件会降级成一个普通表单。

文件上传插件File Input介绍

一般情况下,我们需要引入下面两个文件,插件才能正常使用:

bootstrap-fileinput/css/fileinput.min.css
bootstrap-fileinput/js/fileinput.min.js

简单的界面效果和众多上传文件控件一样,可以接受各种类型的文件。当然,我们也可以指定具体接受的文件类型等功能。

美洲杯赌球 6

如果需要考虑中文化,那么还需要引入文件:

bootstrap-fileinput/js/fileinput_locale_zh.js

这样基于MVC的Bundles集合,我们把它们所需要的文件加入到集合里面即可。

//添加对bootstrap-fileinput控件的支持
css_metronic.Include("~/Content/MyPlugins/bootstrap-fileinput/css/fileinput.min.css");
js_metronic.Include("~/Content/MyPlugins/bootstrap-fileinput/js/fileinput.min.js");
js_metronic.Include("~/Content/MyPlugins/bootstrap-fileinput/js/fileinput_locale_zh.js");

这样我们在页面里面,就可以呈现出中文的界面说明和提示了

美洲杯赌球 7

文件上传插件File Input的使用

一般情况下,我们可以定义一个JS的通用函数,用来初始化这个插件控件的,如下JS的函数代码所示。

//初始化fileinput控件(第一次初始化)
function initFileInput(ctrlName, uploadUrl) { 
 var control = $('#'   ctrlName); 
 control.fileinput({
 language: 'zh', //设置语言
 uploadUrl: uploadUrl, //上传的地址
 allowedFileExtensions : ['jpg', 'png','gif'],//接收的文件后缀
 showUpload: false, //是否显示上传按钮
 showCaption: false,//是否显示标题
 browseClass: "btn btn-primary", //按钮样式 
 previewFileIcon: "<i class='glyphicon glyphicon-king'></i>", 
 });
}

页面代码里面,我们放置一个文件上传控件,如下代码所示。

本文由美洲杯赌球发布于计算机教程,转载请注明出处:Bootstrap FileInput.美洲杯赌球:js springmvc uploadFi

TAG标签: 美洲杯赌球
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。