文件input框选择图片实时显示小技巧

最新推荐文章于 2023-02-08 17:56:28 发布

weixin_30914981

最新推荐文章于 2023-02-08 17:56:28 发布

阅读量382

点赞数

文章标签：后端 javascript python ViewUI

原文链接：http://www.cnblogs.com/dongxixi/p/11062095.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

</head>
<body>
 <label for="id_myfile">头像
       <img src="" alt="" width="80" style="margin-left: 20px" id="id_img">
 </label>
 <input type="file" name="myfile" id="id_myfile">     {#如果嫌弃这个文件框可以设置属性：display:none#}

 <script>
         $('#id_myfile').change(function () {
        // 先获取用户上传的文件对象
        let fileObj = this.files[0];
        // 生成一个文件读取的内置对象
        let fileReader = new FileReader();
        // 将文件对象传递给内置对象
        fileReader.readAsDataURL(fileObj); //这是一个异步执行的过程，所以需要onload回调函数执行读取数据后的操作
        // 将读取出文件对象替换到img标签
        fileReader.onload = function(){  // 等待文件阅读器读取完毕再渲染图片
           $('#id_img').attr('src',fileReader.result)
        }
    });
 </script>
</body>
</html>

下一篇：ajax将文件发往Django后端

https://www.cnblogs.com/dongxixi/p/11062232.html

转载于:https://www.cnblogs.com/dongxixi/p/11062095.html

weixin_30914981

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文件input框选择图片实时显示小技巧

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.m...
复制链接

扫一扫