Очистить объект, сгенерированный URL.createObjectURL()

Я использую URL.createObjectURL() в файле типа ввода, чтобы передать URL-адрес img.src, чтобы сообщить браузеру загрузить предоставленное изображение.Очистить объект, сгенерированный URL.createObjectURL()

Вот мой код:

<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()?

источник

2016-02-19 Anthonius

Для этого вам следует использовать привязки данных. Тогда я бы отобразил изображение условно.

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

источник

2016-02-19 02:27:17

Я попробовал ваш ответ, но он показывает TypeError: Невозможно установить свойство «SRC» нулевых – Anthonius

@Anthonius Мне нужно больше информации о вашей установке для отладки этого. Я подозреваю, что вы не используете 'controllerAs' для' ctrl'. Вы можете установить его на что угодно или просто использовать '$ scope', но использовать' controllerAs' является предпочтительным. –

В контроллере я использую '$ scope.src = "";' ' $ scope.fileSelected = функция (событие) { $ scope.src = $ window.URL.createObjectURL (event.target.files [0 ]); } ' и в шаблоне я пишу ' <входной тип = "Файл" принимает = "изображение/*" нг-изменение = "fileSelected ($ событие)"> ' ' Кнопка < type = "button" ng-click = "src = ''"> ' – Anthonius

Очистить объект, сгенерированный URL.createObjectURL()

ответ

Смежные вопросы