input框文件类型图片展示

最新推荐文章于 2024-07-19 18:08:01 发布

置顶 qq_41181141

最新推荐文章于 2024-07-19 18:08:01 发布

阅读量304

点赞数

文章标签： javascript html html5

本文链接：https://blog.youkuaiyun.com/qq_41181141/article/details/109801737

版权

本文详细介绍了如何使用HTML5的FileReader API来实现上传图片的预览功能，通过JavaScript处理input框选择的文件，读取图片内容并显示。

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

<HTML>  
    <head>  
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.6.1/jquery.js"></script>
    </head>  
    <body>  
       <input type="file" >
        <img src="" alt="" width="10%">
    </body>  
    <script>
       var f = $('input[type="file"]')[0];
      
       f.onchange = function (){
           var imgShow = $('img')[0]
           var file = f.files[0];   // 获取 File 类型的对象  {name: "1.jpg", lastModified: 1599530631124, lastModifiedDate: Tue Sep 08 2020 10:03:51 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 2047, …}
           var reader = new FileReader(); 
           reader.readAsDataURL(file);   // 将file转成  url   异步操作 FileReader {readyState: 2, result: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD…Jj9UICO0fh54x5I8X6iiciKxawMo9q7uRPiJE7kW79H//2Q==", error: null, onloadstart: null, onprogress: null, …}
           reader.onload = function(){  //reader 读取图片信息是异步操作  必须有这个方法  当文件读取成功后  执行图片地址的赋值
                imgShow.src = reader.result;
           }  
       }
    </script>
</html>