图片上传
<!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"> ???????<link rel="stylesheet" href="css/reset.css" /> ???????<link rel="stylesheet" href="css/grzl.css" /> ???????<title>个人资料</title> ???????<style> ???????????.form-btn { ???????????????margin-top: 12rem; ???????????} ???????</style> ???</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 type="button" value="保存" id="form-btn" /> ???????????</div> ???????</form> ???????<script type="text/javascript" src="js/jquery.1.10.2.js"></script> ???????<script type="text/javascript" src="js/template-web.js"></script> ???????<script type="text/javascript" src="layer/layer.js" ></script> ???????<script type="text/javascript" src="js/mui.min.js" ></script> ???????<script type="text/javascript" src="js/plusready.js" ></script> ???????<script id="main" type="text/html"> ???????????<li> ???????????????<span>头像</span> ???????????????<div id="prvid" class="prvid tab-nav-fr"> ???????????????????{{if data.data.user_img==="http://kt106.zs.ktwlkj.com"}} ???????????????????????<img src="img/goods.jpg" /> ???????????????????{{else}} ???????????????????????<img src={{data.data.user_img}} /> ???????????????????{{/if}} ???????????????</div> ???????????????<input type="file" id="files" onchange="previewImage(this, ‘prvid‘)" /> ???????????</li> ???????????<li> ???????????????<span>用户ID</span> ???????????????<em class="tab-nav-fr">{{data.data.id}}</em> ???????????</li> ???????????<li> ???????????????<span>昵称</span> ???????????????????????????????<input type="text" class="tab-nav-fr" id="username" placeholder="请输入用户名" value={{data.data.username}} > ???????????????????????????</li> ???????</script> ???????????<script> ???????????//返回上一页 ???????????!(function() { ???????????????var goReturn = document.getElementById("return"); ???????????????goReturn.onclick = function() { ???????????????????window.history.go(-1) ???????????????} ???????????})() ???????????????????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); ???????????????????????????????mui.toast(‘图片格式错误‘); ???????????????????????????} else { ???????????????????????????????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 //向后台传输的图片 ???????????????} ???????????} ???????????var api = localStorage.getItem("api"); ???????????$.post(api + "/api/user/user_index", { ???????????????????Authorization: localStorage.getItem("token") ???????????????}, ???????????????function(data) { ???????????????????console.log(data); ???????????????????var tabNav = document.querySelector(".tab-nav"); ???????????????????tabNav.innerHTML = template(‘main‘, { ???????????????????????data ???????????????????}); ???????????????}); ???????????//保存数据 ???????????$("#form-btn").click(function() { ???????????????var username=$("#username").val(); ???????????????if(!username){ ???????????????????return layer.msg("用户名不能为空"); ???????????????} ???????????????$.post(api + "/api/user/member_update", { ???????????????????????user_img: user_img, ???????????????????????username: username, ???????????????????????Authorization: localStorage.getItem("token") ???????????????????}, ???????????????????function(data) { ???????????????????????location.href = "wd.html"; ???????????????????}); ???????????}) ???????</script> ???</body></html>base64图片上传
原文地址：https://www.cnblogs.com/zimengxiyu/p/10072384.html