使用Angular.js

Question

我有一个问题。我正在使用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);">

这里假设用户第一次选择了一个图像lets say abc.png。用户再次单击相同的输入字段，当文件对话框打开时，即使用户尚未选择下一个图像，第一个图像i.e-abc.png也会消失。同样，如果用户在该文件对话框中单击取消选项，则先前选择的图像名称不会显示在文件字段中，这不应该发生。

除非用户没有为同一个文件字段选择第二个图像，否则我需要在该文件字段中显示以前的图像名称。请帮助我。

Answer 1

你可以试试这个。

这将解决您的问题。

HTML

<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>

CSS

.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;
    }
  }