html 上传预览图片
直接上代码了
<!DOCTYPE html> <html><head lang="en"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="apple-mobile-web-app-title" content="环球漫游"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="format-detection" content="telephone=no"> <meta name="keywords" content="环球漫游"> <meta name="description" content="环球漫游"> <title>个人资料</title> <link rel="stylesheet" href="css/uroa-basic.css"> <link rel="stylesheet" href="css/user.css"> </head> <body> <div class="uroa-content"> <!--头部--> <div class="uro-padeltwo"> <a href="index.html" class="urop-link urop-return"></a> <h2 class="uro-title">个人资料</h2> </div> <p class="base-resourse">基本资料</p> <div class="uroa-qhj"> <span class="yhwidth">头像</span> <div class="user-photo"> <img src="./images/user-img.png" id="seeImg" /> <input id="file_head" class="file-3" type="file" size="30" onchange="javascript:setImagePreview(event);" accept="image/*" capture="camera"> </div> </div> <div class="uroa-qhj"> <a href="http://www.baidu.com"> <span class="yhwidth">昵称</span> <i class="des-yh">微信用户名</i> </a> </div> <div class="uroa-qhj"> <a href="http://www.baidu.com"> <span class="yhwidth">性别</span> <i class="des-yh">男</i> </a> </div> <div class="uroa-qhj bottom-none"> <span class="yhwidth">生日</span> <input type="text" name="" class="des-brithday " value="2016-01-21" id="brithday" readonly="readonly" /> </div> <p class="base-resourse">其他资料</p> <div class="uroa-qhj"> <a href="http://www.baidu.com"> <span class="yhwidth">姓名</span> <i class="des-yh">用户名</i> </a> </div> <div class="uroa-qhj none-bg bottom-none"> <span class="yhwidth">手机号</span> <i class="des-yh">181****4152</i> </div> </div> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript"> function setImagePreview(event) { var seeImg = document.getElementById('seeImg'); //seeImg.src=picture; var files = event.target.files, file; if (files && files.length > 0) { // 获取目前上传的文件 file = files[0]; // 来在控制台看看到底这个对象是什么 console.log(file); // 那么我们可以做一下诸如文件大小校验的动作 if(file.size > 1024 * 1024 * 2) { alert('图片大小不能超过 2MB!'); return false; } // !!!!!! // 下面是关键的关键，通过这个 file 对象生成一个可用的图像 URL // 获取 window 的 URL 工具 var URL = window.URL || window.webkitURL; // 通过 file 生成目标 url var imgURL = URL.createObjectURL(file); // 用这个 URL 产生一个 <img> 将其显示出来 // $('body').append($('<img/>').attr('src', imgURL)); seeImg.src=imgURL; // 使用下面这句可以在内存中释放对此 url 的伺服，跑了之后那个 URL 就无效了 // URL.revokeObjectURL(imgURL); } } </script> </body> </html>
css
/*#个人中心页面-头像修改*/ .userlogin-box{position: relative; top: 15px;width: 100%;height:60px;line-height: 60px;padding: 10px 15px;box-sizing: border-box;} .img-left{width: 60px;height:60px;float: left;display: inline-block;} .user-re{width: 123px; height: 44px; float: left;display: inline-block;margin-top: 3px; margin-left: 16px;} .user-re p{width: 123px;height: 22px; display: inline-block;margin:0; line-height: 22px; float: left;font-size: 15px;color:#ffffff;} .imgbod{width: 49px;height: 49px;display: inline-block;border-radius: 50%;} .user-iphone-bg{background: url(../images/userindex_iphone.png) no-repeat left; background-size:8px 14px; padding-left:10px;} /*个人中心跳转*/ .user-link{width: 75px;height: 50px;line-height: 50px;float: right;} .urser-presonal{font-size: 15px;color: #ffffff;background: url(../images/user_right.png) no-repeat right;background-size:10px 15px;padding-right: 13px; } .user-photo img{width: 100%;} .user-photo{ position: relative;overflow: hidden;} .file-3{position: absolute; top: 0; right: 0; bottom: 0; border: 0; padding: 0; margin: 0; height: 32px; width: 100%; cursor: pointer; opacity: 0; }
