使用FileReader对象的readAsDataURL方法回显图片

最新推荐文章于 2025-06-23 20:18:05 发布

原创最新推荐文章于 2025-06-23 20:18:05 发布 · 3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#使用FileReader对象的readAsDataURL方法

WEB前端专栏收录该内容

32 篇文章

订阅专栏

本文介绍了一种利用JavaScript中的FileReader对象读取文件并将其转换为DataURL的方法，以此来实现用户上传图片后的即时预览功能。通过具体代码示例展示了如何限制文件类型仅接受图片，并使用base-64编码将图片数据嵌入到网页中。

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

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>使用FileReader对象的readAsDataURL方法回显图片</title>
		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
	</head>
	
<body>
	<script type="text/javascript">  
     function changImg(e){  
        for (var i = 0; i < e.target.files.length; i++) {  
            var file = e.target.files.item(i); 
            //正则表达式判断文件类型是否为图片
            while (!(/^image\/.*$/i.test(file.type))) {              	
                  
                alert('不是图片');
                break;//不是图片 就跳出这一次循环
            }  
            //实例化FileReader 
            var freader = new FileReader(); 
            //FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL
            //readAsDataURL方法会使用base-64进行编码
            //编码的资料由data字串开始，后面跟随的是MIME type，然后再加上base64字串，逗号之后就是编码过的图像文件的内容。
            freader.readAsDataURL(file);  
            freader.onload = function(e) { 
            	//更改img的src属性
                $("#myImg").attr("src",e.target.result);  
            }  
        }  
    }  
</script> 

<form action="">  
   <input type="file" name="files" accept="image/*" onchange="changImg(event)" >
   <img alt="暂无图片" id="myImg"  height="200px",width="200px">  
</form> 
</body>  
 
</html>