直接上代码了

<!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:; 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:;
right:;
bottom:;
border:;
padding:;
margin:;
height: 32px;
width: 100%;
cursor: pointer;
opacity:; }

html 上传预览图片的更多相关文章

  1. 上传预览图片的插件jquery-fileupload

    上传预览图片的插件jquery-fileupload github地址:https://github.com/blueimp/jQuery-File-Upload 中文文档:http://www.jq ...

  2. 微信开发中使用微信JSSDK和使用URL.createObjectURL上传预览图片的不同处理对比

    在做微信公众号或者企业微信开发业务应用的时候,我们常常会涉及到图片预览.上传等的处理,往往业务需求不止一张图片,因此相对来说,需要考虑的全面一些,用户还需要对图片进行预览和相应的处理,在开始的时候我使 ...

  3. 异步上传&预览图片-不压缩图片

    本例使用ajaxFileUpload异步上传预览图片 <bean id="multipartResolver" class="org.springframework ...

  4. 上传预览图片自己做的.md

    1.无插件预览(window.URL.createObjectURL) ```javascript //demo 图片预览  单个 $(".demo input#demo_file" ...

  5. 异步上传&预览图片-压缩图片

    移动端普及的时代,流量是用户最关心的,手机拍出来的照片基本上都在1~2M以上,这样上传会非常耗流量,影响用户体验,此例能在保证清晰度的情况下,将4.5M的图片压缩为30K <!DOCTYPE h ...

  6. javascript 上传 预览图片 兼容 谷歌 ie

    最近的项目要用到这块,但是在网上找了很多资料,很多都是假的,都不行,最后终于找到一个,还是可以兼容主流的,特分享给大家,可以用 <!DOCTYPE html PUBLIC "-//W3 ...

  7. Vue 中使用 viewerjs进行本地上传预览图片

    https://www.cnblogs.com/shenjp/p/9754171.html 如果图片路径是 接口的返回信息的话,将路径存储在数组中,在this.$nextTick中实例化Viewer: ...

  8. 兼容好的JS图片上传预览代码

    转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...

  9. Jquery图片上传预览效果

    uploadPreview.js jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this, _this = $(thi ...

随机推荐

  1. iptables 设置肯限制流量

    1.查看本机关于IPTABLES的设置情况 [root@tp ~]# iptables -L -n Chain INPUT (policy ACCEPT) target prot opt source ...

  2. 【QUESTION】

    1. HTTP和HTTPS的区别? 2. Soap协议的理解? 3. 一个成功项目,从代码层分析存在可能的问题? 4. mysql 容载技术有哪些? 5. mysql的性能优化有哪些心得? ----- ...

  3. html5,格式的验证

    <form action="" method="get">    <input type="text" name=&quo ...

  4. node 异步编程

    node 异步编程 我了解到的node异步编程可分成: 1.回调函数 2.pub/sub模式(发布/订阅模式) 3.promise 4.generator 5.async await 一.直接回调函数 ...

  5. [原] MSSQL MDF文件太大问题

    USE 你的库名; GO -- 数据库空间使用情况 EXEC sp_spaceused; -- 查下文件空间使用情况 SELECT file_id, name, [文件大小(MB)] = size / ...

  6. 【原创】(AMD)JavaScript模块化开发(dojo)

    AMD原理等在这里就不进行说明了,作者也是菜鸟一枚,只是对自己的一个实例进行说明,如有错误,望指出. 首先,先推荐一篇AMD方面的文章,有兴趣的可以参考:http://efe.baidu.com/bl ...

  7. javascript: parse JSON

    $.get("/intra/do/sequence_has_codonList.pl",function(data){ data = JSON.parse(data); // ar ...

  8. MySQL时间段查询

    现实中我们会遇到统计报表.比如查询当月每一天的数据数量...等等之类的.以下内容就是有关这方面的咯. 首先要知道几个函数 mysql> select now(); //这个是显示的当前时间 +- ...

  9. vue.js实现添加删除

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. lnmp搭建

    一,安装php1,列出php php-fpm是否存在yum list php php-fpm2,安装yum -y install php php-fpm3,启动php-fpm:/etc/init.d/ ...