这也是学习过程中的一个很使用的知识点就分享给大家了
注释都写在里面了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="col-sm-2">
<img id="preview_img" src="" class="img-rounded" style="border-radius:500px; width:100px;height:100px;">
<input class=" file-loading preview_input" type="file" value="用户名" style="width:72px" id="avatar" name="avatar"
onchange="mypit()">
<script>
// 封装获取元素的方法
let $ = (elem) => { return document.querySelector(elem) };
function mypit() {
// 初始值
var url = ‘‘;
//获取forms中的文件，并赋值给url，每次调用URL.crreateObjectURl方法时，都会创建一个对象。
url = window.URL.createObjectURL($("#avatar").files[0]);
//获取img标签对象的src，并将url赋值给img标签的src属性，这是完成打印的一步。
$("#preview_img").src = url;
}
</script>
</div>
</body>
</html>
原文地址：https://www.cnblogs.com/linlinYo/p/11668055.html