flex 上传文件预览

as文件:

//文件浏览上传

import flash.net.FileFilter;

import flash.net.FileReference;

privatevar file:FileReference=new FileReference();

privatevar file2:FileReference=new FileReference();

privatevar file3:FileReference=new FileReference();

privatevar file4:FileReference=new FileReference();

 

privatefunction look(str:String):void

{

    //localChoose.addEventListener(MouseEvent.CLICK, doSelect);

    //选择要上传文件的类型

    var imageTypes:FileFilter=new FileFilter("图片 (*.jpg, *.jpeg, *.gif,*.png)", "*.jpg; *.jpeg; *.gif; *.png");

    var textTypes:FileFilter=new FileFilter("文本文件(*.txt","*.txt;");

    var officeType:FileFilter=new FileFilter("Office文件(*.doc, *.xls", "*.doc; *.xls");

    var anyType:FileFilter=new FileFilter("所有文件(*.*)","*.*");

    var allTypes:Array=new Array(imageTypes, textTypes, officeType, anyType);

    file.browse(allTypes);

    file.addEventListener(Event.SELECT, onSelect);

 

//submitBtn.addEventListener(MouseEvent.CLICK, doUpload);

 

}

 

 

privatefunction look2(str:String):void

{

    //localChoose.addEventListener(MouseEvent.CLICK, doSelect);

    //选择要上传文件的类型

    var imageTypes:FileFilter=new FileFilter("图片 (*.jpg, *.jpeg, *.gif,*.png)", "*.jpg; *.jpeg; *.gif; *.png");

    var allTypes:Array=new Array(imageTypes);

    file2.browse(allTypes);

    file2.addEventListener(Event.SELECT, onSelect02);

 

   //submitBtn.addEventListener(MouseEvent.CLICK, doUpload);

 

}

privatefunction look3(str:String):void

{

    //localChoose.addEventListener(MouseEvent.CLICK, doSelect);

    //选择要上传文件的类型

    var officeType:FileFilter=new FileFilter("Office文件(*.doc, *.xls", "*.doc; *.xls");

    var allTypes:Array=new Array(officeType);

    file3.browse(allTypes);

    file3.addEventListener(Event.SELECT, onSelect03);

 

   //submitBtn.addEventListener(MouseEvent.CLICK, doUpload);

 

}

privatefunction look4(str:String):void

{

    //localChoose.addEventListener(MouseEvent.CLICK, doSelect);

    //选择要上传文件的类型

    var anyType:FileFilter=new FileFilter("所有文件(*.*)","*.*");

    var allTypes:Array=new Array(anyType);

    file4.browse(allTypes);

    file4.addEventListener(Event.SELECT, onSelect04);

 

   //submitBtn.addEventListener(MouseEvent.CLICK, doUpload);

 

}

publicfunction onSelect(evt:Event):void

{

 

    localPath01.text=file.name;

}

publicfunction onSelect02(evt:Event):void

{

    localPath02.text=file2.name;

}

publicfunction onSelect03(evt:Event):void

{

    localPath03.text=file3.name;

}

publicfunction onSelect04(evt:Event):void

{

    localPath04.text=file4.name;

}

publicfunction doUpload(event:Event):void

{

    if (localPath01.text =='')

    {

        Alert.okLabel="";

        Alert.show("请选择要上传的文件!","警告");

    }

    else

    {

        Alert.show("上传成功");

    }

 

}

 

mxml文件:

    <mx:FormItem label="附件:">

                      <mx:HBox>

                          <mx:TextInput width="500"

                                       height="80"

                                       id="localPath04"/>

                          <mx:Button label="浏览..."

                                    click="look4('04')"/>

                      </mx:HBox>

                   </mx:FormItem>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是一个简单的示例: 1. 安装依赖 ``` npm install --save @angular/material @angular/cdk @angular/flex-layout ``` 2. 导入模块和组件 在 `app.module.ts` 中导入以下模块和组件: ```typescript import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { FormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http'; import { MatInputModule } from '@angular/material/input'; import { MatButtonModule } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; import { MatCardModule } from '@angular/material/card'; import { FlexLayoutModule } from '@angular/flex-layout'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, FormsModule, HttpClientModule, MatInputModule, MatButtonModule, MatIconModule, MatCardModule, FlexLayoutModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule {} ``` 3. 编写组件模板和样式 在 `app.component.html` 中编写组件模板: ```html <div fxLayout="column" fxLayoutAlign="center center"> <mat-card> <mat-card-header> <mat-card-title>上文件</mat-card-title> </mat-card-header> <mat-card-content> <input type="file" (change)="onFileSelected($event)" /> <mat-card *ngIf="previewUrl"> <mat-card-header> <mat-card-title></mat-card-title> </mat-card-header> <img [src]="previewUrl" /> </mat-card> </mat-card-content> <mat-card-actions> <button mat-raised-button color="primary" (click)="uploadFile()">上</button> </mat-card-actions> </mat-card> </div> ``` 在 `app.component.css` 中编写组件样式: ```css mat-card { margin-top: 20px; max-width: 500px; } img { max-width: 100%; max-height: 300px; } ``` 4. 编写组件代码 在 `app.component.ts` 中编写组件代码: ```typescript import { Component } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { file: File | null = null; previewUrl: string | null = null; constructor(private httpClient: HttpClient) {} onFileSelected(event: any) { this.file = event.target.files[0]; this.preview(); } preview() { if (!this.file) { this.previewUrl = null; return; } const reader = new FileReader(); reader.readAsDataURL(this.file); reader.onload = () => { this.previewUrl = reader.result as string; }; } uploadFile() { if (!this.file) { return; } const formData = new FormData(); formData.append('file', this.file); this.httpClient.post('http://example.com/upload', formData).subscribe( response => { console.log(response); }, error => { console.error(error); } ); } } ``` 这个组件包括三个方法: - `onFileSelected`:当用户选择文件时触发,将文件存储到 `file` 变量中,并调用 `preview` 方法文件。 - `preview`:使用 `FileReader` 对象读取 `file` 变量中的文件,并将结果存储到 `previewUrl` 变量中。 - `uploadFile`:将 `file` 变量中的文件到服务器。 需要注意的是,这个示例代码中上的 URL 地址是假的,需要根据实际情况修改。同时,也需要在后端代码中对文件进行处理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值