前端上传图片后如何回显图片
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;
});
上一篇: springmvc中WebMvcConfigurationSupport中addInterceptor使用详解及方法详解
下一篇: 【正版/白嫖】 一键白嫖 Idea Webstorm Pycharm - jetbrains 全家桶 (半永久)
本文标签
声明
本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。