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

前端 0

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

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

// HTML<input type="file" id="uploadInput" /><img id="previewImage" src="" alt="Preview Image" />// JavaScriptconst 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" /><img id="previewImage" src="" alt="Preview Image" />// JavaScriptconst 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;});

也许您对下面的内容还感兴趣: