图片上传
<!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>