input file标签选中图片通过ajax实时显示在img中 

<!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">

 <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>

 

posted @ 2021-05-07 14:48  邓居旺  阅读(183)  评论(0)    收藏  举报