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

一、实现自定义上传样式

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

自定义上传控件的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新群