javascript - 在 angularjs 中显示图像预览时出错

Question

我正在使用 ng-file-upload 来处理图像。是的，我有两个选项来为每个选项上传图像。当显示第一张图像时，它显示在我的第一个 ng-model 中，但是当我在第二个 ng-model 中显示第二张图像时，它不会显示，但它会覆盖我的第一个 ng-model。然后我分享我的 html View :

<div class="row">
    <div class="col s12 m12 hide-on-med-and-down">
      <div class="image-upload">
        <label for="file-input">
          <i class="material-icons left teal-text">photo_camera</i>
          Agrega imagen 1...
        </label>
        <input
          id="file-input"
          type="file"
          ngf-select
          ng-model="data.imagen_promocion"
          name="file"
          ngf-pattern="'image/*'"
          accept="image/*"
          ngf-max-size="3MB"
        />
      </div>
      <img ngf-thumbnail="data.imagen_promocion || '/thumb.jpg'"/>
    </div> 
    <div class="col s12 m12 hide-on-med-and-down">
      <div class="image-upload">
        <label for="file-input">
          <i class="material-icons left teal-text">photo_camera</i>
          Agrega imagen 2...
        </label>
        <input
          id="file-input"
          type="file"
          ngf-select
          ng-model="data.imagen_promocion2"
          name="file"
          ngf-pattern="'image/*'"
          accept="image/*"
          ngf-max-size="3MB"
        />
      </div>
      <img ngf-thumbnail="data.imagen_promocion2 || '/thumb.jpg'"/>
    </div> 
  </div>

我发现我的错误是在 css 中:

.image-upload > input{
  display: none;
}
.image-upload i{
  font-size: 30px;
  cursor: pointer;
}

当我删除这个 css 样式时它工作正常。这是我的jsfiddle

如何修复此错误？我先谢谢你了

Answer 1

虽然你的 fiddle 工作正常，但标签使用有问题:

<label for="file-input">
<input id="file-input">

pair 应该是唯一的，你不应该写双对。这会导致一些问题。

将标签输入更改为以下样式，我认为这可以解决问题:

<label for="file-input-1"></label>
<input id="file-input-1"></input>

<label for="file-input-2"></label>
<input id="file-input-2"></input>

当我尝试使用你的 fiddle 时，看起来不错: