js 获取 input file 文件附给 image src

最新推荐文章于 2025-02-15 11:29:55 发布

转载最新推荐文章于 2025-02-15 11:29:55 发布 · 648 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Mr-Joe/p/3858988.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用JavaScript读取文件并将其显示为图片的方法。通过FileReader API读取文件内容，并创建Blob来处理读取的数据，最终将图片显示在页面上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var a=document.querySelector('input[type=file]');

a.onchange = function (e) {

//var reader = new FileReader();
//reader.readAsDataURL(a.files[0]);
//reader.onload = function (event) {
//img.src = event.target.result;
//};

var reader = new FileReader();
reader.readAsArrayBuffer(a.files[0]);
reader.onload = function (event) {
// blob stuff
var blob = new Blob([event.target.result]); // create blob...
window.URL = window.URL || window.webkitURL;
var blobURL = window.URL.createObjectURL(blob); // and get it's URL
var img=new Image();

img.src=blobUrl;

document.body.appendChild(img);
};
}

转载于:https://www.cnblogs.com/Mr-Joe/p/3858988.html