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

时间:2017-07-27 04:42:37

标签: javascript angularjs

我正在使用ng-file-upload来处理图片。是的,我有两个选项来上传每个图像。显示第一个图像时,我的第一个ng模型显示,但是当我在第二个ng模型中显示我的第二个图像时,它没有显示,但它是我的第一个ng模型。然后我分享我的HTML视图:

<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

如何修复此错误?我提前谢谢你

1 个答案:

答案 0 :(得分:0)

虽然您的小提琴工作正常,但标签使用存在问题:

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

对应该是唯一的,你不应该写双对。这会引起一些问题。

将标签输入更改为以下样式,我认为它将解决问题:

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

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

当我尝试你的小提琴时似乎很好:

enter image description here