图片上传
<!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>
原文：https://www.cnblogs.com/zimengxiyu/p/10072384.html