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新群

  • 相关阅读:
    MyBatis学习总结(四)——解决字段名与实体类属性名不相同的冲突
    MyBatis学习总结(三)——优化MyBatis配置文件中的配置
    MyBatis学习总结(二)——使用MyBatis对表执行CRUD操作
    MyBatis学习总结(一)——MyBatis快速入门
    web开发工具IDE
    mysql可视化管理工具
    mysql慢查询
    optimize table
    yii2 安装
    JavaScript中将JSON的字符串解析成JSON数据格式
  • 原文地址:https://www.cnblogs.com/liumingwang/p/7428707.html
Copyright © 2011-2022 走看看