在项目开发时有些业务场景需要用户上传图片并回显上传的图片,项目没有使用layui等前端框架,只能自己开发了。在此备注下方便后续取用。
总结下逻辑:
通过input文件域上传图片,通过js获取图片的base64,放入要显示图片的src属性中即可。
代码如下(直接复制可用):
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>上传图片并显示至页面Demo</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function(){
// 这个只是用于触发input文件域的点击事件
// 文件域放出来太丑了┭┮﹏┭┮
$("#uploadBtn").click(function() {
$("#photoFile").click();
})
// 正文开始,绑定文件域名的change事件
$("#photoFile").change(function () {
//获取input file的files文件数组;
//$('#filed')获取的是jQuery对象,.get(0)转为原生对象;
//这边默认只能选一个,但是存放形式仍然是数组,所以取第一个元素使用[0];
var file = $('#photoFile').get(0).files[0];
var typeName = file.type.substring(file.type.indexOf("/") + 1);
//创建用来读取此文件的对象
var reader = new FileReader();
//使用该对象读取file文件
reader.readAsDataURL(file);
//读取文件成功后执行的方法函数
reader.onload = function (e) {
//读取成功后返回的一个参数e,整个的一个进度事件
//选择所要显示图片的img,要赋值给img的src就是e中target下result里面
//的base64编码格式的地址
$('#photoImg').get(0).src = e.target.result;
}
})
// 上传至服务器的操作省略......
})
</script>
</head>
<body>
<div style="text-align: center;">
<img id="photoImg" style="width: 200px;height: 200px;">
<input type="file" id="photoFile" style="display: none;">
<div>
<button style="padding: 10px;margin-top: 10px;" id="uploadBtn">上传图片</button>
</div>
</div>
</body>
</html>
效果如图: