文件夹结构

版本都是3.x

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> New Document </title>

  <meta name="Generator" content="EditPlus">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <link href="bootstrap-3.3.5/dist/css/bootstrap.min.css" rel="stylesheet">

<link href="bootstrap-fileinput-master/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />

<script src="jquery-2.1.1.min.js"></script>x

<script src="bootstrap-fileinput-master/js/plugins/canvas-to-blob.min.js" type="text/javascript"></script>

<script src="bootstrap-fileinput-master/js/fileinput.min.js"></script>

<script src="bootstrap-3.3.5/dist/js/bootstrap.min.js" type="text/javascript"></script>

<script src="bootstrap-fileinput-master/js/fileinput_locale_zh.js"></script>

 </head>

 <body>

<form>

    <div class="" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

        <div class="modal-dialog modal-lg" role="document">

            <div class="modal-content">

                <div class="modal-header">

                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

                    <h4 class="modal-title" id="myModalLabel">请选择Excel文件</h4>

                </div>

                <div class="modal-body">

                    <a href="~/Data/ExcelTemplate/Order.xlsx" class="form-control" style="border:none;">下载导入模板</a>

                    <input type="file" name="txt_file" id="txt_file" multiple class="file-loading" />

                </div></div>

        </div>

    </div>

</form>

 </body>

</html>

<script>

$(function () {

    //0.初始化fileinput

    var oFileInput = new FileInput();

    oFileInput.Init("txt_file", "/api/OrderApi/ImportOrder");

});

//初始化fileinput

var FileInput = function () {

    var oFile = new Object();

    //初始化fileinput控件（第一次初始化）

    oFile.Init = function(ctrlName, uploadUrl) {

    var control = $('#' + ctrlName);

    //初始化上传控件的样式

    control.fileinput({

        language: 'zh', //设置语言

        uploadUrl: uploadUrl, //上传的地址

        allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀

        showUpload: true, //是否显示上传按钮

        showCaption: false,//是否显示标题

        browseClass: "btn btn-primary", //按钮样式

        //dropZoneEnabled: false,//是否显示拖拽区域

        //minImageWidth: 50, //图片的最小宽度

        //minImageHeight: 50,//图片的最小高度

        //maxImageWidth: 1000,//图片的最大宽度

        //maxImageHeight: 1000,//图片的最大高度

        //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小

        //minFileCount: 0,

        maxFileCount: 10, //表示允许同时上传的最大文件个数

        enctype: 'multipart/form-data',

        validateInitialCount:true,

        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",

        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",

    });

    //导入文件上传完成之后的事件

    $("#txt_file").on("fileuploaded", function (event, data, previewId, index) {

        $("#myModal").modal("hide");

        var data = data.response.lstOrderImport;

        if (data == undefined) {

            toastr.error('文件格式类型不正确');

            return;

        }

        //1.初始化表格

        var oTable = new TableInit();

        oTable.Init(data);

        $("#div_startimport").show();

    });

}

    return oFile;

};

</script>

bootstrap-fileinput简单完整列子的更多相关文章

  1. bootstrap fileinput控件 + django后台上传、回显简单使用

    一.控件下载:https://github.com/kartik-v/bootstrap-fileinput/ 官网:http://plugins.krajee.com/file-input 需要引入 ...

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

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

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

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

  4. JS组件系列——Bootstrap文件上传组件：bootstrap fileinput

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

  5. bootstrap fileinput添加上传成功回调事件

    国外牛人做的bootstrap fileinput挺酷的,但是可惜没有提供自定义上传成功回调事件的接口,因此感到非常头疼,但是很幸运的是,我在网上搜索到一个提问帖子,它问到使用Jquery的on函数绑 ...

  6. 结合bootstrap fileinput插件和Bootstrap-table表格插件，实现文件上传、预览、提交的导入Excel数据操作流程

    1.bootstrap-fileinpu的简单介绍 在前面的随笔,我介绍了Bootstrap-table表格插件的具体项目应用过程,本篇随笔介绍另外一个Bootstrap FieInput插件的使用, ...

  7. Bootstrap fileinput：文件上传插件的基础用法

    官网地址:http://plugins.krajee.com/ 官网提供的样例:http://plugins.krajee.com/file-input/demo 基础用法一 导入核心CSS及JS文件 ...

  8. bootstrap fileinput 使用记录

    第一次使用bootstrap fileinput碰到了许多坑,做下记录 需求 本次使用bootstrap fileinput文件上传组件,主要用来上传和预览图片.作为一个后台管理功能,为某个表的某个字 ...

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

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

随机推荐

  1. AC日记——数字统计 openjudge 1.5 41

    41:数字统计 总时间限制:  1000ms 内存限制:  65536kB 描述 请统计某个给定范围[L, R]的所有整数中,数字2出现的次数. 比如给定范围[2, 22],数字2在数2中出现了1次, ...

  2. easyUI的dateBox控制时间格式

    <input type='text' name='yearQuery' class='easyui-datebox ' data-options="formatter:myformat ...

  3. 从零开始学CSRF

    为什么要拿CSRF来当"攻击手法系列"的开头篇呢?因为CSRF/XSRF我个人喜爱他的程度已经超过XSS了.如果说XSS是一个老虎,那么CSRF就是隐藏在暗处的蛇. 相信现在很多人 ...

  4. Html中模态框（弹出框）使用入门

    作为html学习学习模态框需要二步: 效果图 第一步学习HTML中 div的弹出 ①触发按钮         <input class="btn btn-success" i ...

  5. Oracle日期格式转换

    本文主要介绍Oracle中的日期转换. 1. 日期转化为字符串 (以2016年10月20日为例) select to_char(sysdate,'yyyy-mm-dd hh24:mi:ss')  st ...

  6. 关于webpack.optimize.CommonsChunkPlugin的使用二

    Note:当有多个入口节点的时候,只有所有入口节点都引入了同一个模块的时候,webpack.optimize.CommonsChunkPlugin才会将那个模块提取出来,如果其中一个入口节点没有引入该 ...

  7. http协议.md

    该文转自:HTTP协议详解 HTTP协议详解 引言 超文本传输协议(HTTP,HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议.所有的WWW文件都必须遵守这 ...

  8. 查看Mysql实时执行的Sql语句

    最近给客户开发了基于Asp.Net mvc5 +Mysql+EF的项目,但是在EF里无法看到Mysql执行的语句 之前也找到一些监控Mysql的软件但一直没有用起来,现在又遇到了问题即在EF里Mysa ...

  9. Sonatype Nexus Maven仓库搭建和管理

    安装 1. 从 http://www.sonatype.org/nexus/ 下载最新的 Nexus 压缩包, 现在已经不提供war包的下载 2. 解压到服务器目录, 例如我是放到/opt/nexus ...

  10. 利用Spring的@Async异步处理改善web应用中耗时操作的用户体验

    Web应用中,有时会遇到一些耗时很长的操作(比如:在后台生成100张报表再呈现,或 从ftp下载若干文件,综合处理后再返回给页面下载),用户在网页上点完按钮后,通常会遇到二个问题:页面超时.看不到处理 ...