在angularjs中顯示圖像預覽時出錯

我正在使用ng-file-upload來處理圖像。是的，我有兩個選項可以爲每個圖片上傳圖片。當我的第一個ng模型中顯示第一個圖像時顯示，但是當我在第二個ng模型中顯示我的第二個圖像時，它不顯示，但它已經寫完了我的第一個ng模型。然後，我分享我的HTML視圖：在angularjs中顯示圖像預覽時出錯

<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

我該如何解決這個錯誤？我感謝你提前

來源

2017-07-27 Diego Israel Moreno

試着改變你的ID和名稱爲第二個文件輸入到不同的名稱 – Vivz

我得到相同的錯誤@Vivz –

看起來正確，如果你已經更新了id是唯一的，你可以在plnkr上顯示更多的代碼？ –

雖然你的提琴工作正常，則說明標籤的使用問題：

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

這似乎很好，當我想你的提琴：

來源

2017-07-27 06:58:07

我的朋友是真的，但我發現我的錯誤，如果你可以幫忙？我要編輯我的問題 –

您是否更改標籤ID並輸入爲唯一對？ –

是的，但這不是錯誤，錯誤是在我的CSS，如果我刪除我的CSS一切正常 –

在angularjs中顯示圖像預覽時出錯

回答

相關問題