JavaScript 之使用 XMLHttpRequest 预览文件（图片）

最新推荐文章于 2021-04-15 12:26:13 发布

weixin_34343000

最新推荐文章于 2021-04-15 12:26:13 发布

阅读量508

点赞数

CC 4.0 BY-SA版权

文章标签：运维 javascript ViewUI

原文链接：http://www.cnblogs.com/tlxxm/p/4399305.html

本文介绍了一种使用HTML和JavaScript实现文件上传并实时预览图片的方法。通过监听文件输入框的变化，利用FileReader API读取用户选择的文件，并将图片显示在页面上。

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

1 <div id="div1">
2             <input type="file" id="uploadfile" style="width: 100px; height: 25px;" />
3             <input id="b1" type="button" value="上传" style="display: inline-block; width: 40px; height: 25px;" />
4             <img id="img1" src="" />
5         </div>

 1 window.onload = function () {
 2     document.getElementById("uploadfile").addEventListener("change", function () {
 3         //1、获取所选的文件 暂时只选一个
 4 
 5         var filereader = new FileReader();
 6         filereader.onloadend = function (event) {
 7             console.log("a");
 8             var filedata = event.target.result;
 9             document.getElementById("img1").src = filedata;
10         }
11        
12         var file = document.getElementById("uploadfile").files[0];
13         filereader.readAsDataURL(file);
14     }, true);
15 }