文件夹结构

版本都是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. Java之单例模式

    单例模式: public class Person{ public static Person per//定义一个静态变量,用来储存当前类的对象 private Person()//构造方法私有化 { ...

  2. 查看oracle死锁进程并结束死锁

    查看锁表进程SQL语句1: select sess.sid, sess.serial#, lo.oracle_username, lo.os_user_name, ao.object_name, lo ...

  3. sublime和python--path

    配置Sublime Text 2 的Python运行环境 (2013-09-11 11:36:17) 转载▼ 标签: python 分类: 科技相关     Sublime Text 2作为一款轻量级 ...

  4. 通过ssh tunnel连接内网ECS和RDS

    通过ssh tunnel连接内网ECS和RDS 这里讲了ssh tunnel的原理.很清晰. 此后又给外网访问内网增加了一种思路.感觉特别棒. 拓宽了思路:

  5. 利用mybatis-generator自动生成代码

    mybatis-generator有三种用法:命令行.eclipse插件.maven插件.个人觉得maven插件最方便,可以在eclipse/intellij idea等ide上可以通用. 下面是从官 ...

  6. 实验一 Java开发环境的熟悉

    实验一 Java开发环境的熟悉(Linux + Eclipse) 实验内容 1.使用JDK编译.运行简单的Java程序: 2.使用Eclipse 编辑.编译.运行.调试Java程序. 实验要求 1.没 ...

  7. swift 动手写网络请求封装（仿照了一个大神的）不用导入第三方

    新建一个类Network import UIKit //NSURLSession 的使用过程: // //构造 NSURLRequest //确定 URL //确定 HTTP 方法(GET.POST ...

  8. Intel pin 2.14/CentOS 6 X86-64/安装

    环境:Intel Pin 2.14 CentOS 6 X86-64 --linux.tar.gz 进入 ./source/tools/ManualExamples make all TARGET=in ...

  9. 基于DDD的.NET开发框架 - ABP日志Logger集成

    返回ABP系列 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称. ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应 ...

  10. APP架子迁移指南（二）

    接上一篇,这一篇开始用android来解释MVP概念.八股式的架子结构和命名规范.我在准备这篇文章的时候还看到不少在MVP基础上衍生的架子思路,底子是MVP没错,但命名有区别.复杂度变了.架子也用到了 ...