自定义上传图片样式并实现上传立即展示该图片

最近做了一个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新群