iisp-ts-common/src/fileupload.component.ts

import {Component, Input} from "@angular/core";

import {FileUploader} from "ng2-file-upload";

import {BaseComponent} from './base.component';

declare var restRoot: string;;
@Component({
	moduleId: module.id,
    selector: "iisp-file-upload",
    template: `<input type='file' ng2FileSelect [uploader]='uploader' accept='{{fileUploadInfo.allowedFileType}}' [(ngModel)]="fileUploadInfo.fileInputValue" (change)='selectedFileOnChanged($event)' />
		<span title='{{fileUploadInfo.message}}' [ngClass] = 'fileUploadInfo.iconClass'></span>`
})
export class FileUploadComponent extends BaseComponent{
	@Input()
	fileUploadInfo: FileUploadInfo;
	index = 0;
	public uploader = new FileUploader({
	        url: restRoot + "/common/files/upload",
	        method: "POST",
	        itemAlias: "uploadedfile"
    	});
    //  定义事件，选择文件
    selectedFileOnChanged(event: any) {
        // 打印文件选择名称
        this.uploadFile(this.fileUploadInfo);
    }
    //  定义事件，上传文件
    uploadFile(fileUploadInfo: FileUploadInfo) {
        // 上传
		console.debug("length: " + this.uploader.queue.length);
        this.uploader.queue[this.index].onSuccess = function(response, status, headers) {
			fileUploadInfo.uploading = false;
            // 上传文件成功
            if (status == 200) {
                // 上传文件后获取服务器返回的数据
				console.debug(response);
                let tempRes = JSON.parse(response);
				console.debug("tempRes.uploadPaths:" + tempRes.uploadPaths);
				fileUploadInfo.uploadedFiles = fileUploadInfo.uploadedFiles.concat(tempRes.uploadPaths);
				fileUploadInfo.iconClass = "successmini";
				fileUploadInfo.message = "Uploaded";
            } else {
				fileUploadInfo.iconClass = "errormini";
				fileUploadInfo.message = "Upload failed";
            }
        };
		//fileUploadInfo.uploadedFiles = null;
        this.uploader.queue[this.index].upload(); // 开始上传
		this.index++;
		fileUploadInfo.uploading = true;
		fileUploadInfo.iconClass = "loadingmini";
		fileUploadInfo.message = "Uploading";
    }
    isRunning(): boolean{ return false;}
}

export class FileUploadInfo {
	uploadedFiles: string[] = new Array();
	fileInputValue: string;
	uploading: boolean = false;
	iconClass = "blankmini";
	message: string;
	allowedFileType: string;
	constructor(allowedFileType?: string) {
		if (allowedFileType) {
			this.allowedFileType = allowedFileType;
		}
	}
	reset():void {
		this.fileInputValue = "";
		this.uploading = false;
		this.message = "";
		this.iconClass = "blankmini";
	}
}