Question

我在输入类型文件中使用URL.createObjectURL（）将URL传递给img.src，告诉浏览器加载提供的图像。

这是我的代码：

<input type="file" accept="image/*" onchange="document.getElementById('image-container').src = window.URL.createObjectURL(this.files[0])">
<img id="image-container"/>

我想制作一个删除按钮来清除对象，以便用户可以浏览另一个图像。我试图通过 .src =“”传递空字符串，但它不起作用。

<button type="button" ng-click="document.getElementById('image-container').src = ""><span aria-hidden="true">&times;</span></button>

如果我坚持继续使用URL.createObjectURL（），有人可以建议如何删除创建的对象吗？

Answer 1

您应该使用数据绑定来代替这样做。然后，我会有条件地显示图像。

// Controller
this.src = "";
this.fileSelected = $event => {
  this.src = $window.URL.createObjectURL($event.target.files[0]);
}

// Template
<input type="file" accept="image/*"
  ng-change="ctrl.fileSelected($event)">
<img ng-if="ctrl.src" ng-src="ctrl.src">

<button type="button" ng-click="ctrl.src = ''">
  <span aria-hidden="true">&times;</span>
</button>

URL.createObjectURL（）生成的清除对象

1 个答案: