Angular4上传Excel文件

最新推荐文章于 2025-03-25 01:24:14 发布

枯草随风倒

最新推荐文章于 2025-03-25 01:24:14 发布

阅读量2.7k

点赞数

分类专栏： angular

本文链接：https://blog.youkuaiyun.com/qq_39252501/article/details/79397418

版权

angular 专栏收录该内容

4 篇文章

订阅专栏

*.html

<div id="upload" class="form-group">
    <label for="lastname" class="col-sm-3 control-label">批量导入</label>
    <div class="col-sm-6">
    <input type="text" [value]="selectFileName" class="form-control" readonly="true"/>
</div> 
 <!-- 给这个input 设置样式隐藏 -->
<input type="file" id="file" accept=".xls,.xlsx" ng2FileSelect [uploader]="uploader" style="filter:alpha(opacity=0);opacity:0;width: 0;height: 0;" (change)="selectedFileOnChanged($event)" />
<!-- <input type="file" id="file" accept=".xls,.xlsx" ng2FileSelect [uploader]="uploader" style="display:none" (change)="selectedFileOnChanged($event)" /> -->

<input class="btn btn-default" type="button" value="浏览..." (click)="selectFile()"/>
<input class="btn btn-primary" type="button" value="上传" (click)="uploadFile()" [disabled]="btnUploadIsDisabled"/>
<!-- <label for="lastname" class="col-sm-3 control-label">批量导入</label>
<div class="col-sm-6">
    <input type="file" accept=".xls,.xlsx" ng2FileSelect [uploader]="uploader" (change)="selectedFileOnChanged($event)" />
    <input class="btn btn-default" type="button" value="上传" (click)="uploadFile()" [disabled]="btnUploadIsDisabled"/>
</div> -->
</div>

*.ts

btnUploadIsDisabled: Boolean; //使上传按钮失效
selectFileName:any = "未选择文件";
uploader: FileUploader = new FileUploader({
    url: 'http://****',
    method: 'POST',
    itemAlias: 'file',
    autoUpload: false,
    // removeAfterUpload: true,
    allowedFileType: ['xlsx', 'xls'],
});
selectedFileOnChanged(event: any) {
    // 打印文件选择名称
    this.btnUploadIsDisabled = false;       
        <!-- “\”是转义字符，所以要表示一个字符串“\”就要用“\\” -->
    this.selectFileName = event.target.value.substr(event.target.value.lastIndexOf("\\")+1);
    console.log(this.selectFileName);
}

uploadFile() {
    // 上传
    this.btnUploadIsDisabled = true;
    this.uploader.queue[0].onSuccess = (response, status, headers) => {
        // 上传文件成功
        if (status === 200) {
            // 上传文件后获取服务器返回的数据
            console.log('status:' + status);
            const tempRes = JSON.parse(response);
            if (tempRes.result == 'OK') {
                this.isSuccess = true;
                this.btnUploadIsDisabled = false;
                this.showMessage("成员上传成功");
            } else {
                this.isSuccess = false;
                this.btnUploadIsDisabled = false;
                this.showMessage(tempRes.data);
            }
        } else {
            // 上传文件后获取服务器返回的数据错误
            this.isSuccess = false;
            this.btnUploadIsDisabled = false;
            this.showMessage("网络异常,请重新尝试");
        }
    };
    this.uploader.queue[0].upload(); // 开始上传
}
selectFile(){
    document.getElementById("file").click();
}