直接上代码了

<!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. 使用EF Oracle实现DevExpress绑定大数据的ServerMode模式

    前提:需要引入EntityFramework组件,注意几个使用点后使用上其实比较简单. 一.引入Oracle EF支持组建 1.可手动引入附件中的DLL(需手动合并web.config配置) 2.也可 ...

  2. 编写第一个MapReduce程序—— 统计气温

    摘要:hadoop安装完成后,像学习其他语言一样,要开始写一个“hello world!” ,看了一些学习资料,模仿写了个程序.对于一个C#程序员来说,写个java程序,并调用hadoop的包,并跑在 ...

  3. Macaca开源--阿里的移动自动化测试框架

    https://github.com/macacajs/macaca-cli 项目在此 https://macacajs.github.io/macaca/cli-usage.html 文档在此 项目 ...

  4. call经常用到的地方

    看完这几个下例子,会对学习js有所帮助1.小猫和小狗 function food(){} food.prototype={ food:'fish', say:function(){ console.l ...

  5. SQLServer针对排名函数ROWNUMBER()、RANK()、DENSE_RANK()、NTILE的研究！~

    相信大家在软件工程中经常会遇到对某些数据进行排名的问题,尤其是对于电子商务的HR来说“大手笔”是非常具有潜在价值的!~至于都有哪些价值这个超出本文的范畴不予进行说明,但是不得不说的是每一个精明的HR以 ...

  6. 2.2 C#的注释

    注释,是代码中的一些“说明文档”,注释注释本身不会参与程序代码的编译和运行,仅仅是为了方便程序员阅读. C#的注释分为:单行注释.多行注释.文档注释. 单行注释的符号是2条斜杠线(斜线的方向是左下到右 ...

  7. JS获取当前浏览器的类型

    <script type=“text/javascript”> function isIE(){return navigator.appName.indexOf(“Microsoft In ...

  8. 利用ANTLR4实现一个简单的四则运算计算器

    利用ANTLR4实现一个简单的四则运算计算器 ANTLR4介绍 ANTLR能够自动地帮助你完成词法分析和语法分析的工作, 免去了手写去写词法分析器和语法分析器的麻烦 它是基于LL(k)的, 以递归下降 ...

  9. 1.Linux系统安装

    Linux系统安装系统分区(磁盘分区) 主要管理:文件和目录分类:主分区:最多有4个 扩展分区:1个扩展分区 和主分区最多4个 存放逻辑分区 逻辑分区:存放数据 格式化:高级格式化(逻辑格式化) 写入 ...

  10. prince2 证书有用吗

    prince2 证书有用吗  ? 项目管理是一件非常困难的事情,新闻里充斥着虽利润高却未能成功支付的项目案例.这是为什么呢? 最主要的原因是项目工作比日常的商业工作要困难的多.日常的商业工作往往是重复 ...