前端页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Input File 选中图片直接渲染到img标签</title>
<script src="js/jquery-3.6.0-min.js"></script><!--y引入jquery-->
</head>
<body>
<input type="file" name="doc" id="doc" accept="image/*"> <!--accept="image/*" 限制用户上传的文件为图片类型-->
<div id="localImag">
<img id="preview" width="268px" height="149px" alt="图片" />
</div>
</body>
</html>
js部分
<script type="text/javascript">
$("#doc").change(function (event) {
//根据这个input获取文件的 HTML5 js 对象
let files = event.target.files, file;
if (files && files.length > 0) {
// 获取目前上传的图片
file = files[0];
// 控制打印file对象
console.log(file);
// 限制图片上传大小
if (file.size > 1024 * 1024 * 2) {
alert('图片大小不能超过 2MB!');
$("#doc").val("");
return false;
}
// 通过这个 file 对象生成一个可用的图像 URL
// 获取 window 的 URL 工具
let URL = window.URL || window.webkitURL;
// 通过 file 生成目标 url
let imgURL = URL.createObjectURL(file);
$("#preview").attr("src", imgURL);
}
});
</script>
效果展示
图片选择前：
图片选择后：
版权声明：本文为qq_45953233原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。