文件上传(bootstrap fileinput)

在做Excel文件上传和下载时，原生文件输入框太不美观，从网上找的bootstrap fileinput还是挺漂亮的，

需要引用的文件
  //4.fileUpload
            bundles.Add(new ScriptBundle("~/Script/FileUploadJs").Include(
                        "~/Scripts/FileUpload/zh.js",
                        "~/Scripts/FileUpload/fileinput.min.js"));
            bundles.Add(new StyleBundle("~/Css/FileUploadCss").Include(
                         "~/Css/FileUpload/fileinput.min.css"));

html中嵌入

<div class="modal fade" id="ImportModel" tabindex="-1" role="dialog" aria-labelledby="#myModalLabel">
    <div class="modal-dialog" 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">从Execl导入员工</h4>
            </div>
            <div class="modal-body">
                <form id="formtt" class="form-horizontal">
                    <div class="form-group" style="margin-top:15px">
                        <a href="~/Excel/Template/UserTemplate.xlsx" class="form-control" style="border:none;">下载导入模板</a>                      
                         <input id="txt_file" type="file" multiple class="file" data-overwrite-initial="false">
                        <br>                             
                    </div>
                </form>
                
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button>
                <button type="button" id="btn_submit" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存</button>
            </div>
        </div>
    </div>
</div>

相关Js代码如下

//初始化fileinput
var FileInput = function () {
    var oFile = new Object();
    //初始化fileinput控件（第一次初始化）
    oFile.Init = function (ctrlName, uploadUrl) {
        var control = $('#' + ctrlName);

        //初始化上传控件的样式
        control.fileinput({            
            uploadUrl: uploadUrl, //上传的地址
            allowedFileExtensions: ['jpg', 'gif', 'png','xlsx'],//接收的文件后缀
            showUpload: true, //是否显示上传按钮
            showCaption: false,//是否显示标题
            overwriteInitial: false,
            browseClass: "btn btn-primary", //按钮样式     
            dropZoneEnabled: false,//是否显示拖拽区域           
            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) {           
            $("#div_startimport").show();
        });
    }
    return oFile;
};

当然初始化时可设置的选项远不止这些，组件功能强大，灵活性也比较强

做后端，js代码基本的能写，html布局及美化实在是不咋样，所以基本都是借助网上开放的组件资源，去学习拿来用

下篇文章介绍一款开源的操作Excel文件的组件EPPlus,用着感觉比NPOI方便些

秒客网

文件上传(bootstrap fileinput)

相关文章