文件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.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

 

posted @ 2019-06-20 23:25  希希大队长  阅读(3248)  评论(0)  编辑  收藏  举报