zoukankan      html  css  js  c++  java
  • upload上传文件

    上传Excel文件代码demo:

    下载上传js文件:bower install ng-file-uploa;引入js文件;

    angular.module('dc.workflow', [
    'ngFileUpload'
    ]);

    js代码:
    var data=this.data={file:null};
    //定义data.file为空;
    this.selectImage = function (file) {
    this.errorFileType = false;
    if (file[0].type != 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
    this.errorFileType = true;
    }
    };
    //判断上传文件类型,定义errorFileType为false,if()里面为判断条件,判断条件为非的时候(也就是条件不成立),errorFilterType为true;
    上传文件正确时(也就是条件成立)获取上传的文件的所有信息,包括文件名称,大小,格式等等,储存在file里面;
    this.importFile = function (ev) {
    if (this.errorFileType || !data.file) {
    this.errorFileType = true;
    return
    }
    //这里是判断上面条件不成立的时候直接return,不执行下面的代码;
    Upload.upload({
    url: commonSvc.baseURlForDCBulk + 'api/import/' + templateId,
    data: {ExcelFile: data.file}
    //条件成立,上传文件到固定的接口地址,并且获取上传文件

    }).then(function (result) {
    //上传文件成功后所执行的代码
    $mdDialog.hide();
    $mdDialog.show({
    controller: 'tableDataImportSuccessModalCtrl',
    controllerAs: '$ctrl',
    templateUrl: 'modal/data-import-export/table-data-import-success-modal.html',
    parent: angular.element(document.body),
    targetEvent: ev,
    locals: {},
    clickOutsideToClose: false,
    fullscreen: false // Only for -xs, -sm breakpoints.
    }).then(function (result) {

    });
    }).catch(commonSvc.translateHttpError);
    };

    html代码:
    <md-dialog style="min- 30%" aria-label="create table">
    <md-toolbar style="font-weight:bold;background-color:#fff; color: #000;">
            <div class="md-toolbar-tools">
    <h2>
    {{'select-file' | translate}}
    <span style="color: #9A9A9A; font-size: 12px; margin-left:5px;">请上传Excel文件</span>
    </h2>
    <span flex></span>
    </div>
    </md-toolbar>

    <md-dialog-content>
    <div class="md-dialog-content" style="padding-top: 0">
    <div layout="row">
    <md-input-container class="no-margin no-padding" flex>
    <input aria-label="input" name="fileName" ng-model="$ctrl.data.file.name" disabled
    style="height: 38px; border: 1px solid #ccc;"/>
                        //ng-model获取上传文件的name并显示在文本框里
    </md-input-container>
    <md-button aria-label="upload" class="select-file-btn"
    ngf-select="$ctrl.selectImage($files)"//执行selectImage函数$files作为参数传递到函数file里面
    accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
    ngf-pattern="'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'"
                    //这两行代码是设置上传文件的类型
    ng-model="$ctrl.data.file"//ng-model获取上传文件储存在模板中>
    选择文件
    </md-button>
    </div>
    <span ng-if="$ctrl.errorFileType" class="errors">*请上传Excel文件.</span>

    <p style="color: #9A9A9A; margin-top: 10px;" class="no-margin">*{{'import-file-temp' | translate}}</p>
    <p style="color: #9A9A9A;" class="no-margin">*{{'import-file-temp-content' | translate}}</p>
    <p style="color: #9A9A9A;" class="no-margin">*文件不得超过20M</p>
    </div>
    </md-dialog-content>

    <md-dialog-actions layout="row">
    <md-button aria-label="button" class="md-warn no-padding" ng-click="$ctrl.closeDialog()">
    取消
    </md-button>
    <md-button aria-label="button" class="md-primary md-raised no-padding" ng-click="$ctrl.importFile($evemt)"//点击上传直接上传文件函数>
    上传
    </md-button>
    </md-dialog-actions>
    </md-dialog>




     
  • 相关阅读:
    Sokect简单入门(1)TCP协议一
    Tomcat内存溢出 解决方法
    服务器配置 ssl 证书,Nginx配置
    优秀的博客文章记录
    SpringBoot实现优雅的关机
    关于 redis 的 数据类型 和 内存模型
    微信, qq 支付宝 等相关开发 资源 记录
    设计模式 之 单列设计模式
    Swagger
    MQ服务器奔溃解决过程
  • 原文地址:https://www.cnblogs.com/ncloud/p/7519776.html
Copyright © 2011-2022 走看看