文章出處
文章列表
直接上代碼了
<!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; }
文章列表
全站熱搜
留言列表
