HTML 中的 img 元素：文件属性和 src 属性的行为不同
img element in HTML: file attribute and src attribute behaves differently
我有一个 file 属性保存在某个 <img id = "one"> 元素上。表示file属性包含File type的对象。我有另一个 <img id = "two"> 元素。当我尝试这个时：
document.getElementById('two').src = document.getElementById('one').file
它的行为与以下不同：
document.getElementById('two').file = document.getElementById('one').file
第一行代码returnsstring表示我的File包含在img one中，第二行代码returns实际 File 对象。这种行为差异是怎么回事？
HTMLImageElements don't have a file attribute，因此当您分配 document.getElementById('two').file 时，您只是在 JavaScript 上创建 file 属性表示 <img id="two"> 的对象。访问那个 属性，你会得到你输入的 File。
但是document.getElementById('two').src是一个IDL attribute，反映了img元素的src内容属性。 src 内容属性包含图像的地址，因此当您从 JavaScript 访问 src IDL 属性时，您将文件转换为字符串：
2.7.1 Reflecting content attributes in IDL attributes
Some IDL attributes are defined to reflect a particular content attribute. This means that on getting, the IDL attribute returns the current value of the content attribute, and on setting, the IDL attribute changes the value of the content attribute to the given value.
[...]
If a reflecting IDL attribute is a USVString attribute whose content attribute is defined to contain a URL, then on getting, if the content attribute is absent, the IDL attribute must return the empty string. Otherwise, the IDL attribute must parse the value of the content attribute relative to the element's node document and if that is successful, return the resulting URL string. If parsing fails, then the value of the content attribute must be returned instead, converted to a USVString.
如果您想使用文件，请使用 <input type="file">，否则您无法将 "file" 放入 <img> 标签
我有一个 file 属性保存在某个 <img id = "one"> 元素上。表示file属性包含File type的对象。我有另一个 <img id = "two"> 元素。当我尝试这个时：
document.getElementById('two').src = document.getElementById('one').file
它的行为与以下不同：
document.getElementById('two').file = document.getElementById('one').file
第一行代码returnsstring表示我的File包含在img one中，第二行代码returns实际 File 对象。这种行为差异是怎么回事？
HTMLImageElements don't have a file attribute，因此当您分配 document.getElementById('two').file 时，您只是在 JavaScript 上创建 file 属性表示 <img id="two"> 的对象。访问那个 属性，你会得到你输入的 File。
但是document.getElementById('two').src是一个IDL attribute，反映了img元素的src内容属性。 src 内容属性包含图像的地址，因此当您从 JavaScript 访问 src IDL 属性时，您将文件转换为字符串：
2.7.1 Reflecting content attributes in IDL attributes
Some IDL attributes are defined to reflect a particular content attribute. This means that on getting, the IDL attribute returns the current value of the content attribute, and on setting, the IDL attribute changes the value of the content attribute to the given value.
[...]
If a reflecting IDL attribute is a USVString attribute whose content attribute is defined to contain a URL, then on getting, if the content attribute is absent, the IDL attribute must return the empty string. Otherwise, the IDL attribute must parse the value of the content attribute relative to the element's node document and if that is successful, return the resulting URL string. If parsing fails, then the value of the content attribute must be returned instead, converted to a USVString.
如果您想使用文件，请使用 <input type="file">，否则您无法将 "file" 放入 <img> 标签