Angular 2 – 文件上传访问

发布时间：2020-12-17 17:02:08 所属栏目：安全来源：网络整理

导读：div class="fileUpload btn btn-primary" spanChoose File/span input id="uploadBtn" type="file" class="upload" value="No File Selected" #uploadBtn//divinput id="uploadFile" placeholder="No File Chosen" disabled="disabled" value="{{uploadBtn.v

<div class="fileUpload btn btn-primary">
  <span>Choose File</span>
  <input id="uploadBtn" type="file" class="upload" value="No File Selected" #uploadBtn/>
</div>
<input id="uploadFile" placeholder="No File Chosen" disabled="disabled" value="{{uploadBtn.value}}"/>

如何访问用户上传的文件？我如何在angular和typescript中执行此操作,因为我仍然需要处理文件中的数据(例如检查有效的文件类型)？

解决方法

几乎与JavaScript中的方式相同.

如果上面的模板是一个名为FileUploadComponent的组件,你可以这样做.请记住,这是HTML5.所以浏览器支持来自IE10.

@Component({
   selector: 'file-upload',template: `
      ...
      <input type="file" class="upload" (change)="_onChange($event.target.files)">
      ...`
})
export class FileUploadComponent {

    private _onChange(files: FileList) : void {
         if(files && files.length > 0) {
              let file : File = files.item(0);
              //Now you can get
              console.log(file.name);
              console.log(file.size);
              console.log(file.type);
         }
    }

}

您可以使用FileReader扩展此功能以加载文件.

例如,如果您想要读取csv文件：

从文件开始：

let reader: FileReader = new FileReader();

reader.onload = (e) => {
  let csv: string = reader.result;
  console.log(csv);
  //From here you can either use a csv parse library,or your own
  //implementation if you know what the structure of the csv is
}

reader.readAsText(file);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!