Angular2文件输入onchange

Posted 2023-02-24

【中文标题】Angular2文件输入onchange

【英文标题】：Angular2 file input onchange

【发布时间】：2016-11-23 09:33:34

【问题描述】：

我有输入文件（没有提交 - 典型的输入文件）。我想在选择文件时调用一些函数。

示例： 我点击“选择文件”-> 选择文件-> 现在系统检测到更改并调用一些函数来打印所有这些文件信息（例如图像名称）。

我不能在输入文件上使用 ngModel，对吧？该怎么做？

【参考方案1】：

这是我对 Double H 的答案的修正，即不依赖 jQuery 并阻止 webpack 在 e.target.result 上出错。

<img [src]="imageSrc"  />
<input type="file" capture="camera" accept="image/*" (change)="displayPhoto($event)">

打字稿代码

displayPhoto(fileInput) 
  if (fileInput.target.files && fileInput.target.files[0]) 
  const reader = new FileReader();

  reader.onload = ((e) => 
    this.imageSrc = e.target['result'];
  );

  reader.readAsDataURL(fileInput.target.files[0]);

【参考方案2】：

在我添加 onclick="this.value = null" 之前，Double H 的功能对我不起作用：https://***.com/a/42357862/634650

【参考方案3】：

在您的模板中使用以下内容：

<div class="modal-body">
   <input type="file" (change)="fileChangeEvent($event)" placeholder="Upload file..." />
   <img id="preview" src="" >
</div>

然后你的组件fileChangeEvent() as

public fileChangeEvent(fileInput: any)
      if (fileInput.target.files && fileInput.target.files[0]) 
        var reader = new FileReader();

        reader.onload = function (e : any) 
            $('#preview').attr('src', e.target.result);
        

        reader.readAsDataURL(fileInput.target.files[0]);
    

您的所有文件相关信息都会控制台......

【讨论】：

谢谢，它有效。你知道我怎样才能显示选定的照片吗？ fileInput.target.files 响应中没有路径。

如果我必须提交/上传同一个文件两次怎么办？如果我两次选择同一个文件，则不会触发更改事件。我可以使用某种提交事件吗？

我们可以在这里使用一种类型来代替“any”吗？我的项目中有任何残疾人

@MartijnvandenBergh 请参阅下面的 Chris 回答。