Javascript 使用Angular.js单击输入类型文件字段时，图像名称消失

我正在使用

ng file upload

使用Angular.js上传图像。我的问题是，当用户在同一文件字段上第二次选择文件时，先前选择的图像名称没有显示

这是我的密码：

<input type="file" class="filestyle form-control" data-size="lg" name="upload_{{$index}}" id="bannerimage_{{$index}}" ng-model="mul.image" ngf-pattern="'image/*'" accept="image/*" ngf-max-size="2MB" ngf-select="onFileSelect1($index);">

这里假设用户第一次选择了一张图片

，比如abc.png

。用户再次单击同一输入字段，当文件对话框打开时，第一个图像

即-abc.png

消失，即使用户尚未选择下一个图像。类似地，如果用户在该文件对话框中单击“取消”选项，则先前的“选择图像名称”不会显示在文件字段中，这是不应该发生的

这里我需要，除非用户没有为同一文件字段选择第二个图像，否则前一个图像名称应显示在该文件字段上。

您可以尝试此操作。 这会解决你的问题

HTML

---

我知道那里发生了什么，但我需要一个你的问题，抓住罪犯！我猜你的ng模型在这里制造噪音。它在模糊上被清除了event@Angular_10这是我的名片。

<div>
<label>profile picture</label>
<div class="upload" flex ng-show="!avatar" ngf-change="fileSelected(avatar, $files)" ngf-keep="false" ngf-select="true" ngf-drop="true" ng-model="avatar" ngf-capture="'camera'" ngf-drag-over-class="'highlight'" ngf-allow-dir="false"  ngf-min-size="10 " ngf-max-size="30000">
<span class="md-caption"><i class="fa fa-paperclip"></i> Drag-and-drop or click to attach a file</span>
</div>
<p ng-show="avatar && avatar.name" class="md-caption">Selected avatar: {{avatar.name|filename|truncate:false:35}} <i class="fa fa-times text-danger" ng-click="avatar = null"></i></p>
<p ng-show="avatar && !avatar.name" class="md-caption">Current avatar: {{avatar|filename|truncate:false:35}} <i class="fa fa-times text-danger" ng-click="avatar = null"></i></p>
</div>

.upload {
    width: 100%;
    min-height: 40px;
    padding: 20px 10px;
    text-align: center;
    transition: all 0.3s linear;
    border: 2px solid $color-lilac;

    &.highlight {
      border: 4px double $color-true-blue;
    }
  }