在AngularJS中重置文件上傳

Question

我正在嘗試在Angular 1中創建圖像上載功能。我必須允許用戶上載圖像，刪除上載的圖像，更改圖像。我能夠執行所有操作，但是當用戶刪除上載的圖像並重新上傳時相同圖片然后更改事件不會觸發，並且用戶無法再次上傳相同圖片。 控制台上的錯誤是Uncaught SyntaxError: Unexpected end of input 。 我正在使用Google Chrome。 但是，如果我們嘗試上傳其他圖像，則效果很好。

到目前為止，我已經創建了一個插件來演示我的代碼。 這是鏈接： https : //plnkr.co/edit/bjdU2kuAqRA9yHE1CmX4?p=preview

有人可以幫助我找出問題所在嗎？

編輯：默認的“選擇文件”按鈕和文件名將在實際項目中使用CSS隱藏。 因此，我分別在HTML中綁定了文件名和刪除圖標。

Answer 1

刪除圖像時，請從<input type="file">清除圖像，例如：

$scope.removeImage = function(){
  document.getElementById("control").value = "";  <-- Add this line
  $timeout(function(){
     $scope.data.image = undefined;
  }, 100);
};

將ID關聯到<input type="file"> ：

<input type="file" class="upload" file-model-no-preview="data.image" id="control"/>