realsrc 中的 Jquery 输出预览答案

【问题标题】：Jquery output preview in realsrcrealsrc 中的 Jquery 输出预览
【发布时间】：2018-10-03 22:54:15
【问题描述】：

我正在尝试在 realsrc 而不是 src 中输出图像预览。这可能吗？

var reader = new FileReader();
reader.onload = function(){
var output = document.getElementById('output_image');
    output.realsrc = reader.result;
}
reader.readAsDataURL( $('#file')[0].files[0]);

【问题讨论】：

标签： jquery filereader

【解决方案1】：

根据您的代码，output.realsrc 设置了一个名为“realsrc”的属性，而不是属性。
要设置属性，请使用 JavaScript 的 setAttribute()。

var reader = new FileReader();
var file = document.getElementById('file');
var output = document.getElementById('output_image');

reader.onload = function() {
  output.setAttribute('realsrc', this.result);
  console.log(output.getAttribute('realsrc'));
}

file.addEventListener('change', function() {
  reader.readAsDataURL(this.files[0]);
});

<input type="file" id="file">
<img id="output_image">

注意：

...当一个元素具有 id 或另一个标准属性时，会创建相应的属性。 但如果属性是非标准的，则不会发生这种情况。 -- HTML attributes。

另请参阅：
Javascript for adding a custom attribute to some elements。

【讨论】：

太棒了！谢谢！