自定義上傳圖片樣式並實現上傳立即展示該圖片

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