近期在学习使用Angular2做小项目,期间用到很多primeNG的模块。
本系列将结合实战总结angular2-primeNG各个模块的使用经验。

原文地址:

文件上传模块FileUploadModule

 

首先要在使用该组件的模块内导入文件上传模块

 

本例中为:

 

admin.module.ts

首先我很遗憾的告诉大家,因为微软的偷懒,目前UpdatePanel还不支持文件上传。我查了下,有两个办法,我已测试过了,真得很好用。

import {FileUploadModule} from 'primeng/primeng';
@NgModule({
  imports: [FileUploadModule]
})

方案一的解决办法就是UpdatePanel中设置PostBackTrigger:

在需要使用上传功能的组件的HTML页里添加:

<asp:UpdatePanel ID=”UpdatePanel1″ runat=”server”>
<ContentTemplate>
<asp:FileUpload ID=”FileUpload1″ runat=”server” />
<asp:Button ID=”Button1″ runat=”server” Text=”上传”
OnClick=”Button1_Click” />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID=”Button1″ />
</Triggers>
</asp:UpdatePanel>
而如果你又想在这个UpdatePanel上做点花样,比如加了一个asp:Panel,
可以通过按钮事件触发隐藏或显示的,你会发现FileUpload1并不能找到文件。。。

demo-add.component.html:

其实道理很简单,UpdatePanel中的内容是通过XmlHttp实时填充的,在你让他显示之前,查看页面源代码里面是空的。一个动态控件更新普通数据没问题,但上传文件就不行了,我的解决办法是用普通div代替asp:Panel,并写了2个函数来动态发送控制脚本,按钮事件中只要调用该函数即可:

<label>照片:</label>
<div>
  <!--上传组件 -->
   <p-fileUpload 
     name="uploadPhoto[]" 
     url="http://localhost:3333/api/upload"
     (onUpload)="onPhotoUpload($event)" accept="image/*" maxFileSize="1000000">
     <template pTemplate type="content">
       <ul *ngIf="photoFiles.length">
         <li *ngFor="let file of photoFiles">
           {{file.name}} - {{file.size}} bytes
         </li>
       </ul>
     </template>
   </p-fileUpload>
</div>
<!--如果图片上传成功,显示图片 -->
<div *ngIf="demo.photo">
  <img src="{{photoUrl}}">
</div>

<div id=”Panel1″></div>

在组件里写入事件处理及定义变量:

private void ShowPanel()
{
string script = “document.getElementById(‘Panel1’).style.display=”;”;
ScriptManager.RegisterStartupScript(this.Page, this.GetType(),
“ShowPanel”, script, true);
}
private void ClosePanel()
{
string script =
“document.getElementById(‘Panel1′).style.display=’none’;”;
ScriptManager.RegisterStartupScript(this.Page, this.GetType(),
“ClosePanel”, script, true);
}
[转]

demo-add.component.ts:

方案二:

class Demo{
  photo:String;
}
demo = new Demo();
photoFiles: any[] = [];
photoUrl:string;
onPhotoUpload(event) {
  this.demo.photo = JSON.parse(event.xhr.response).data.name;
  this.photoUrl ="upload/demo/"+this.demo.photo;
    for(let file of event.files) {
      this.photoFiles.push(file);
    }
  }

转:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图