前端上传图片后如何回显图片

FFF-X 2024-07-03 09:33:02 阅读 53

在前端上传图片后,可以使用以下几种方法进行回显:

1.使用FileReader API:这是一种常见的方法。在用户选择图片后,可以使用FileReader对象读取图片文件,并将其转换为Base64编码的字符串。然后,将该Base64字符串设置为<img>标签的src属性,即可在页面上显示图片。 

<code>// HTML

<input type="file" id="uploadInput" />code>

<img id="previewImage" src="" alt="Preview Image" />code>

// JavaScript

const uploadInput = document.getElementById('uploadInput');

const previewImage = document.getElementById('previewImage');

uploadInput.addEventListener('change', function() {

const file = uploadInput.files[0];

const reader = new FileReader();

reader.onload = function(e) {

previewImage.src = e.target.result;

};

reader.readAsDataURL(file);

});

2.使用URL.createObjectURL():这是另一种常见的方法。在用户选择图片后,可以使用URL.createObjectURL()方法创建一个临时的URL,然后将该URL设置为<img>标签的src属性,从而在页面上显示图片。 

// HTML

<input type="file" id="uploadInput" />code>

<img id="previewImage" src="" alt="Preview Image" />code>

// JavaScript

const uploadInput = document.getElementById('uploadInput');

const previewImage = document.getElementById('previewImage');

uploadInput.addEventListener('change', function() {

const file = uploadInput.files[0];

const imageURL = URL.createObjectURL(file);

previewImage.src = imageURL;

});



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。