Jquery 在 realsrc 中输出预览

Question

我正在尝试在 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]);

Answer 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">

注意：

... when an element has id or another standard attribute, the corresponding property gets created. But that doesn’t happen if the attribute is non-standard. -- HTML attributes.

另见：
Javascript for adding a custom attribute to some elements.

Jquery 在 realsrc 中输出预览

Jquery output preview in realsrc

jquery

filereader