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

请注意：

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

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

realsrc中的jQuery输出预览

1 个答案: