导入模板

该导入使用angular框架，结合FormData 和files方法写的，对于ie,只支持ie10及以上（FormData和files支持ie10及以上）

1.如下图所示的一个导入案例 ，

2.html文件

<form id="upload" role="form" method="post" enctype="multipart/form-data" name="importForm">
            <div class="agent_detail_content">
                <ul class="clearfix">
                    <li class="">
       ....................
                    </li>
                    <li class="" style="width: 100%;margin-top: 2%">
                        <label class="in_b query_criteria_name tr" style="width: 10%;">导入模板</label>
                        <div class="fr query_criteria_cont" style="width: 89%;">
                            <input name="file" type="file" id="file" class="hidden" />
                            <input  style="width: 30%"  type="text" ng-model="fileName" id="fileName">
                            <input style="width:7%;color: #fff;background-color:#37B0D5;cursor: pointer;" ng-click="selectFile()" type="button" value="浏览">
                        </div>
                        <p style="color:#37B0D5;cursor: pointer;clear: both;text-indent: 5.5%;margin-top: 2%" ng-click="downloadTemplate()">
                            模板下载
                        </p>
                    </li>

                </ul>
            </div>
        </form>
        <div class="query_commit">
            <button id="uploadBtn" ng-click="intermediaryImport()" ng-disabled="importButton">导入</button>
            <button ng-click="goBack()">返回</button>
        </div>

3.js代码 

        //模板下载
        $scope.downloadTemplate = function () {
            if(confirm("确认下载模板吗 ？")){
                window.location.href = "doc/agent/中介人员信息模板.xlsx";
            }
        };

        //点击浏览触发file
        $scope.selectFile = function () {
            $("#file").trigger("click");
        };

        //设置联动效果
        (function () {
            $("#file").change(function () {
                $("#fileName").val($("#file").val());
            });
        })();

      

        //导入
        $scope.intermediaryImport = function () {
            if($scope.importForm.$valid){
                var formData = new FormData();
                //默认只导入第一个
                var file = document.getElementById("file").files[0];
                if(file) {
                    //导入按钮置灰
                    $scope.importButton = true;
                    var fileName = file.name.substring(file.name.lastIndexOf(".") + 1);
                    if (fileName == "xlsx" || fileName == "xls") {
                        formData.append('file', file);
                        formData.append('agentCode',($scope.agentCode || ''));
                        $http({
                            method: "post",
                            url: '/sales/prpDagent/import',
                            data: formData,
                            headers: {
                                'Content-Type': undefined
                            },
                            transformRequest: angular.identity
                        }).then(function (data) {
                            if (data.data.resultCode ==CodesConstant.ReturnCode.SUCCESS) {
                                layerMsg('文件上传成功！');
                            } else {
                                var resultMsg = data.data.resultMsg;
                                layerMsg('文件上传失败！'+resultMsg);
                            }
                            $("#uploadBtn").attr("disabled",false);
                        });
                    } else {
                        layerMsg('文件格式不正确，请上传以.xlsx，.xls 为后缀名的文件。');
                        file = "";
                        $scope.fileName = "";
                        $scope.importButton = false;
                    }
                }else{
                    layerMsg('请选择文件后进行导入！');
                    //导入按钮放开
                    $scope.importButton = false;
                }
            }else {
                layerMsg('表单内容不符合填写规则！请检查！');
            }
        }