javascript - AngularJS 中的文件上传重置

Question

我正在尝试在 Angular 1 中创建图像上传功能。我必须允许用户上传图像、删除上传的图像、更改图像。我可以执行所有这些操作，但是当用户删除上传的图像并且重新上传相同的图像，然后更改事件不会触发，并且用户无法再次上传相同的图像。控制台上的错误是Uncaught SyntaxError: Unexpected end of input。我正在使用谷歌浏览器。但是，如果我们尝试上传其他图像，则效果很好。

到目前为止，我已经创建了一个 plunker 来演示我的代码。这是链接:https://plnkr.co/edit/bjdU2kuAqRA9yHE1CmX4?p=preview

有人可以帮我找出问题所在吗？

编辑:在实际项目中，默认的“选择文件”按钮和文件名将使用 CSS 隐藏。因此，我在HTML中分别绑定(bind)了文件名和删除图标。

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