FileReader：读取图片文件并显示

最新推荐文章于 2024-09-15 21:23:41 发布

X_X_OO

最新推荐文章于 2024-09-15 21:23:41 发布

阅读量2.9k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/X_X_OO/article/details/52529591

这篇博客介绍了如何利用JavaScript的FileReader API读取图片文件，并在网页中显示。通过创建HTML元素，获取文件输入节点，判断浏览器兼容性，监听change事件，读取文件数据并转换为dataURL，最后在onload事件中插入img标签展示图片。

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

第一步创建html

<p> 
   <label>请选择一个图像文件：</label> 
   <input type="file" id="file_input" /> 
</p>  
<div id="result"></div>

通过getElementById获取节点，判断浏览器的兼容性.

var result = document.getElementById("result"); 
var input = document.getElementById("file_input"); 
 
if(typeof FileReader==='undefined'){ 
    result.innerHTML = "抱歉，你的浏览器不支持 FileReader"; 
    input.setAttribute('disabled','disabled'); 
}else{ 
    input.addEventListener('change',readFile,false); 
}

然后，当file_input的change事件触发时，调用函数readFile()。在readFile中，我们首先获取file对象，然后通过file的type属性来检测文件类型，我们当然只允许选择图像类型的文件，然后我们new一个FileReader实例，并调用readAsDataURL方法来读取选中的图像文件，最后在onload事件中，获取到成功读取的文件内容，并以插入一个img节点的方式显示选中的图片。

function readFile(){ 
    var file = this.files[0]; 
    if(!/image\/\w+/.test(file.type)){ 
        alert("文件必须为图片！"); 
        return false; 
    } 
    var reader = new FileReader(); 
    reader.readAsDataURL(file); 
    reader.onload = function(e){ 
        result.innerHTML = '<img src="'+this.result+'" alt=""/>' 
    } 
}