文件夹结构

版本都是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.7 01

    01:统计数字字符个数 总时间限制:  1000ms 内存限制:  65536kB 描述 输入一行字符,统计出其中数字字符的个数. 输入 一行字符串,总长度不超过255. 输出 输出为1行,输出字符串 ...

  2. Eclipse的 JSON Edit插件

    1. Json-Eclipse-Plugin https://github.com/boothen/Json-Eclipse-Plugin 2. 另外一个JSON Edit工具 https://tfe ...

  3. rqnoj28[stupid]愚蠢的宠物

    题目描述 背景 大家都知道,sheep有两只可爱的宠物(一只叫神牛,一只叫神菜).有一天,sheep带着两只宠物到狗狗家时,这两只可爱的宠物竟然迷路了…… 描述 狗狗的家因为常常遭到猫猫的攻击,所以不 ...

  4. 未找到数据，异常处理：exception when no_data_found then 异常处理语句；

    未找到数据. 在 select 字段 Into 变量 from 表 where 条件: 这种语句中很有可能会有select 不到数据的问题,导致报错"未找到数据" 要解决这种问题需 ...

  5. 在移动端如何选择字体大小和布局的单位,px或dp?

    android开发中,文字大小的单位是sp,非文字的尺寸单位用dp,但是我们在设计稿用的单位是px.这些单位如何换算,是设计师.开发者需要了解的关键. 简单理解的话,px(像素)是我们UI设计师在PS ...

  6. 微信JSSDK配置文件说明

    微信JSSDK配置文件说明 1.官方配置 wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开, ...

  7. iOS：CYLTabBarController【低耦合集成TabBarController】

    导航 与其他自定义TabBarController的区别 集成后的效果 项目结构 使用CYLTabBarController 第一步:使用CocoaPods导入CYLTabBarController ...

  8. 在Mac mini上安装 ESXi 5.5

    Mac mini 是 mid 2011 版本的, 安装原版ESXi 5.5 update 1 非常顺利, 没遇到任何问题. 提示: 1. 安装会初始化整个硬盘, 有数据要先备份 2. ESXi只使用有 ...

  9. MySQL触发器如何正确使用

    MySQL触发器如何正确使用 2010-05-18 15:58 佚名 博客园 字号:T | T 我们今天主要向大家介绍的是MySQL触发器进行正确使用,其中包括对MySQL触发器发器的语句创建,触发时 ...

  10. BZOJ 1040 【ZJOI2008】 骑士

    Description Z国的骑士团是一个很有势力的组织,帮会中汇聚了来自各地的精英.他们劫富济贫,惩恶扬善,受到社会各界的赞扬.最近发生了一件可怕的事情,邪恶的Y国发动了一场针对Z国的侵略战争.战火 ...