npoi批量导入实现及相关技巧

http://tm.myscloud.cn:9000，最终实现效果

     导入成功

   导入失败

阅读目录

• 设计流程图
• 代码实现
• npoi生成下拉框两种方式比较
  
• 总结

    /*
    * 功能：    根据业务类型下载导入数据得模版文件
    * 参数：    type：业务类型 取值参照 Ywdsoft.Utility.Excel.ExcelImportType 枚举
    * 返回值：  无
    * 创建人：  焰尾迭
    * 创建时间：2016-08-19
    */
    DownloadExcelTemplate: function (type) {
        if (type == "undefined") {
            return;
        }
        var param = { type: type };
        $.download("/Excel/DownLoadTemplate", param, "get");
    },

 模版上传

/*
    * 功能：    根据业务类型下载导入数据的模版文件
    * 参数：    options：
                {
                    type:业务类型, 取值参照 Ywdsoft.Utility.Excel.ExcelImportType 枚举
                    Ext:可导入文件类型,
                    ReturnDetailData:是否返回详细数据
                    after:function(){}//回调函数
                }
    * 返回值：  无
    * 创建人：  焰尾迭
    * 创建时间：2016-08-22
    */
    ImportExcelTemplate: function (options) {
        if ($.isPlainObject(options)) {
            var defaults = {
                ReturnDetailData: 0
            };

            var param = $.extend({}, defaults, options);

            if (param.type != "undefined") {
                //加载样式和js文件
                $.loadFile("/Content/Css/plugins/webuploader/webuploader.css");
                $.loadFile("/Content/Scripts/plugins/webuploader/webuploader.min.js");
                if (!WebUploader.Uploader.support()) {
                    var error = "上传控件不支持您的浏览器！请尝试升级flash版本或者使用Chrome引擎的浏览器。下载页面";
                    if (window.console) {
                        window.console.log(error);
                    }
                    return;
                }

                var id = "ImportExcelTemplate{0}".format(param.type);
                var modal = $("#" + id);
                $(modal).remove();
                var html =
                    '
'.format(id) +
                        '
' +
                            '
' +
                                '
' +
                                    '×' +
                                    '
Excel导入
' +
                                '
' +
                                '
' +
                                    '
' +
                                        '
导入说明:
导入文件为EXCEL格式，请先下载模板进行必要信息填写，模板下载请点击这里！
'.format(param.type) +
                                        '
' +
                                        '
' +
                                        '' +
                                        '
选择文件
' +
                                        '开始上传' +
                                        '
'
                '
' +
            '
';
                $(html).appendTo("body");
                modal = $("#" + id);
                var postData = { type: param.type, FunctionCode: param.FunctionCode, ReturnDetailData: param.ReturnDetailData };
                var uploader = WebUploader.create({
                    swf: '/Content/Scripts/plugins/webuploader/Uploader.swf',
                    server: '/Excel/ImportTemplate?' + $.param(postData),
                    pick: '#picker',
                    accept: {
                        title: 'excel',
                        extensions: 'xls',
                        mimeTypes: 'application/msexcel'
                    },
                    resize: false,
                    fileSingleSizeLimit: 10 * 1024 * 1024,//10M
                    duplicate: true
                });

                $("#ctlBtn").on('click', function () {
                    uploader.upload();
                });

                // 当有文件被添加进队列的时候
                uploader.on('fileQueued', function (file) {
                    $("#thelist").html('
' +
                        '
' +
                    '
');
                    $(".upload-file-name").val(file.name);
                    $(".btn-start-uploader").show();
                });

                // 文件上传过程中创建进度条实时显示。
                uploader.on('uploadProgress', function (file, percentage) {
                    var $li = $('#' + file.id),
                        $percent = $li.find('.progress .progress-bar');

                    // 避免重复创建
                    if (!$percent.length) {
                        $percent = $('
' +
                          '
' +
                          '
' +
                        '
').appendTo($li).find('.progress-bar');
                    }

                    $li.find('.state').text('上传中');

                    $percent.css('width', percentage * 100 + '%');
                    $(".upload-file-name").val("");
                    $(".btn-start-uploader").hide();
                });

                uploader.on('uploadSuccess', function (file, response) {
                    if (response.IsSuccess) {
                        $('#' + file.id).find('.state').html('' + response.Message + '');
                        if ($.isFunction(param.after)) {
                            param.after(response, modal);
                        }
                    } else {
                        if (response.Message.indexOf("http://") >= 0) {
                            $('#' + file.id).find('.state').html("上传的数据中存在错误数据，请点击下载错误数据！".format(response.Message));
                        } else {
                            $('#' + file.id).find('.state').html('' + response.Message + '');
                        }
                    }


                });

                uploader.on('uploadError', function (file, response) {
                    console.log(response);
                    $('#' + file.id).find('.state').text('上传出错');
                });

                uploader.on('uploadComplete', function (file) {
                    $('#' + file.id).find('.progress').fadeOut(200);
                });

                modal.modal('show');
            }
        }
    }

　   GitHub地址：https://github.com/CrazyJson/TaskManager

      体验工具下载地址：任务管理框架 V2.0

如果，您认为阅读这篇博客让您有些收获，不妨点击一下右下角的【推荐】按钮。
如果，您希望更容易地发现我的新博客，不妨点击一下绿。色通道的【关注我】。

因为，我的写作热情也离不开您的肯定支持。

感谢您的阅读，如果您对我的博客所讲述的内容有兴趣，请继续关注我的后续博客，我是焰尾迭 。