zoukankan      html  css  js  c++  java
  • 自定义上传图片样式并实现上传立即展示该图片

    最近做了一个H5的手机网站,里面有一个上传图片的功能,首先这个上传图片的样式是自定义,由美工设计的,不是默认的<input type="file" >的样式,然后这个图片前端选择上传后,要立即显示这个图片在页面上。

    一、实现自定义上传样式

    先上自定义上传控件的HTML代码:

    <div class="btnWrap">
        <input class="file" type="file">
        <div class="upload ts"></div>
    </div>

    自定义上传控件的css代码:

    .btnWrap{width: 216px; height: 246px; position: relative;}
    .upload{width: 216px; height: 246px; background: url("../img/add.gif") no-repeat; position: absolute;left: 0;top:0;}
    .upload.ts{background-size: 216px 246px;}
    .file{width: 216px; height: 246px; position: absolute; left: 0;top:0; z-index: 10; opacity: 0}

    实现原理总结:

    建一个容器 .btnWrap,在容器里面分别新建.file和.upload ,.file和.upload 都相对于.btnWrap定位,然后设置z-index的值,让 .file 的层级在 .upload 之上,然后再把 .file 的opacity设置为0

    二、js实现上传即展示该图片

    $(function() {
    	$(".file").change(function() {
    		var $file = $(this);
    		var objUrl = $file[0].files[0];
    		//获得一个http格式的url路径:
    		var windowURL = window.URL || window.webkitURL;
    		//createObjectURL创建一个指向该参数对象(图片)的URL
    		var dataURL;
    		dataURL = windowURL.createObjectURL(objUrl);
    		$(".upload").css("background",'url('+dataURL+')').css("backgroundSize","216px 246px");
    	});
    });
    

     实现原理总结:

    把本地图片路径:"E(盘符):/images/..."转为"http://..."格式路径来进行显示图片

      欢迎加入大前端交流群!群号:277942610,VIP新群

  • 相关阅读:
    解决多并发
    一个交换机到底能带几台摄像头?结合生产经验咱们来分析!
    ELK查询命令详解
    Ansible自动化部署入门到进阶笔记
    批量SSH key-gen无密码登陆认证脚本
    ELK查询命令详解总结
    Shell 正则表达式详解
    Linux 常用系统性能命令总结
    什么叫做消息队列呢?
    批量SSH key-gen无密码登陆认证脚本 附件脚本
  • 原文地址:https://www.cnblogs.com/liumingwang/p/7428707.html
Copyright © 2011-2022 走看看