文件夹结构

版本都是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. jmeter的压力测试

    Apache JMeter是Apache组织开发的基于Java的压力测试工具.用于对软件做压力测试. 以下为压力测试的简单介绍 1.在测试计划下增加一个线程组 2.线程组的内容需要进行编辑,根据压力测 ...

  2. win7旗舰版 中文64位 产品密钥（序列号）

    无需破解即可激活Windows 7旗舰版的"神Key". 第一枚"神Key":TFP9Y-VCY3P-VVH3T-8XXCC-MF4YK: 第二枚"神 ...

  3. Y2161 Hibernate第三次考试 2016年8月18日 试卷分析

  4. luogu1328[NOIP2014 T1]生活大爆炸版石头剪刀布

    题目描述 石头剪刀布是常见的猜拳游戏:石头胜剪刀,剪刀胜布,布胜石头.如果两个人出拳一样,则不分胜负.在<生活大爆炸>第二季第8 集中出现了一种石头剪刀布的升级版游戏. 升级版游戏在传统的 ...

  5. 在脚本中使用export导出变量值

    LD_LIBRARY_PATH环境变量可以用于设置Linux动态库的位置,常见的用法如export LD_LIBRARY_PATH=/home/username/foo:$LD_LIBRARY_PAT ...

  6. grunt-contrib-uglify压缩插件的常用配置属性

    mangle:false(不混淆变量名和方法名,保留原有的名字),如果不配置,默认混淆,就是将所有方法名和变量都用a,b,c等字母替换 preserveComments : 'all'(不删除注释,还 ...

  7. History 对象

    History 对象 History 对象包含用户(在浏览器窗口中)访问过的 URL. History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问. 注 ...

  8. parentNode的兼容性问题

    IE9下获取对象层次中的父对象,9以上获取文档层次中的父对象 <table><tr><p><td id="haha">haha< ...

  9. Hibernate总结3

    一,对象的四种状态 临时状态: 与数据库没有对应,跟Session没有关联. 一般是新new出的对象. 持久化状态: 对象在Session的管理之中,最终会有对应的数据库记录.save saveoru ...

  10. js区分鼠标单双击 阻止事件冒泡

    function clickOrDblClick(obj) { count++; if (obj != undefined) { var rowStr = $.trim($(obj).find(&qu ...