Элемент img в HTML: атрибут файла и атрибут src ведут себя по-разному

Question

У меня есть атрибут file, который сохраняется на определенном элементе <img id = "one">. Указанный атрибут file содержит объект File типа . У меня есть другой элемент <img id = "two">. Когда я пытаюсь это:

document.getElementById('two').src = document.getElementById('one').file

ведет себя иначе:

document.getElementById('two').file = document.getElementById('one').file

Первая строка кода возвращает представление string моего File, содержащегося в img one, а вторая строка кода возвращает фактический File объект . Что за разница в поведении?

Answer 1

HTMLImageElement s не имеют атрибута file , поэтому, когда вы присваиваете document.getElementById('two').file, вы просто создаете свойство file объекта JavaScript, представляющего <img id="two">. Получите доступ к этому свойству, и вы вернете File, который вы указали.

Но document.getElementById('two').src - это атрибут IDL , который отражает атрибут содержимого src элемента img. Атрибут содержимого src содержит адрес изображения, поэтому при доступе к атрибуту IDL src из JavaScript вы получаете файл, преобразованный в строку:

2.7.1 Отражение атрибутов содержимого в атрибутах IDL

Некоторые атрибуты IDL определены для отражения определенного атрибута содержимого. Это означает, что при получении атрибут IDL возвращает текущее значение атрибута содержимого, а при установке атрибут IDL изменяет значение атрибута содержимого на указанное значение.

[...]

Если отражающий атрибут IDL является атрибутом USVString, атрибут содержимого которого определен как содержащий URL, то при получении, если атрибут содержимого отсутствует, атрибут IDL должен возвращать пустую строку. В противном случае атрибут IDL должен проанализировать значение атрибута содержимого относительно документа узла элемента и, если это успешно, вернуть полученную строку URL. Если синтаксический анализ завершился неудачно, вместо него должно быть возвращено значение атрибута содержимого, преобразованное в USVString.

Answer 2

Если вы хотите работать с файлами, используйте <input type="file">, иначе вы не можете поместить «файл» в тег <img>