上传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-width: 30%" aria-label="create table">
???<md-toolbar style="font-weight:bold;">#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>
upload上传文件
原文地址:http://www.cnblogs.com/ncloud/p/7519776.html