前端js图片上传
前端js图片上传,原理用input type="file"获取图片然后把图片转换成base64编码传到后台.
图片上传
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title></title>
</head>
<body>
<!--header-->
<div class="header">
<i class="header-calendar" id="return"></i>
<h3><span>个人资料</span></h3>
</div>
<form>
<ul class="tab-nav">
</ul>
<div class="form-btn">
<input id="files" type="file" onchange="previewImage(this, 'prvid')" >
<div id="prvid" class="prvid"></div>
</div>
</form>
<script>
var user_img; //图片
//把图片转成base64
function previewImage(file, prvid) {
/* file：file控件
* prvid: 图片预览容器
*/
var tip = "Expect jpg or png or gif!"; // 设定提示信息
var filters = {
"jpeg": "/9j/4",
"gif": "R0lGOD",
"png": "iVBORw"
}
var prvbox = document.getElementById(prvid);
prvbox.innerHTML = "";
if(window.FileReader) { // html5方案
for(var i = 0, f; f = file.files[i]; i++) {
var fr = new FileReader();
fr.onload = function(e) {
var src = e.target.result;
if(!validateImg(src)) {
//alert(tip);
alert('图片格式错误');
} else {
alert(src);
showPrvImg(src);
}
}
fr.readAsDataURL(f);
}
} else { // 降级处理
if(!/\.jpg$|\.png$|\.gif$/i.test(file.value)) {
//alert(tip);
mui.toast('图片格式错误');
} else {
showPrvImg(file.value);
}
}
function validateImg(data) {
var pos = data.indexOf(",") + 1;
for(var e in filters) {
if(data.indexOf(filters[e]) === pos) {
return e;
}
}
return null;
}
//图片
function showPrvImg(src) {
var img = document.createElement("img");
img.src = src;
prvbox.appendChild(img);
user_img = src //向后台传输的图片
}
}
</script>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！