前端js實現圖片上傳

前端js實現圖片上傳的原理是通過input標籤的type=file屬性將input標籤定義為上傳檔案，對input進行onchange事件的監聽，當input的value值改變時代表使用者已經上傳了圖片，而input的value值就是使用者上傳的圖片的相對路徑，new一個FileReader物件，將圖片轉換成base64格式的編碼，動態建立img標籤並將轉換後的編碼賦值給img標籤的src屬性即可。

首先，進行頁面佈局，頁面佈局是用的浮動佈局。

<div class="content clearFlex">
			<form action="" enctype="multipart/form-data">
				<div class="upImg clearFlex">
					<div class="imgOnloadWrap"></div>
					<div class="upWrap">
						<div class="fileWrap">
							<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" onchange="upImg(this)"/>
						</div>
						<div class="imgWrap">
							<img src="img/icon6.png" alt="" />
						</div>
					</div>
				</div>
			</form>
		</div>
 

.content{
	width:1000px;
	height: 800px;
	background:#fff;
	border-radius:10px;
	padding:10px;
	overflow-y: scroll;
	margin:0 auto;
	border:1px solid #333;
	border-color:rgba(169,169,169,1);
}
.upWrap{
	width:140px;
	height: 80px;
	margin:10px;
	float: left;
	position: relative;
}
.upWrap > .fileWrap,.upWrap > .fileWrap > input[type=file],.upWrap > .imgWrap{
	position: absolute;
	height: 100%;
	width:100%;
	top:0;
	left:0;
}
.upWrap > .fileWrap > input[type=file]{
	z-index: 2;
	opacity: 0;
}
.upWrap > .imgWrap{
	z-index: 1;
}
.upWrap > .imgWrap > img{
	width:100%;
	height: 100%;
}
.upedImg{
	z-index: 3 !important;
}
.upedImg > span.deleteImg{
	position:absolute;
	content: 'X';
	width:20px;
	font-size: 16px;
	color:#ff0000;
	background:rgba(0,0,0,0.6);
	height:20px;
	text-align: center;
	line-height: 20px;
	right:0;
	top:0;
	z-index:4;
}
.clearFlex:after{
	clear: both;
	content: '';
	display: block;
	height: 0;
	zoom:1;
}
 

/*------------------------------上傳圖片---------------------------*/
function upImg(obj){
	var imgFile = obj.files[0];
	console.log(imgFile);
	var img = new Image();
	var fr = new FileReader();
	fr.onload = function(){
		var htmlStr = '<div class="upWrap">';
		htmlStr += '<div class="fileWrap">';
		htmlStr += '<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" onchange="upImg(this)"/>';
		htmlStr += '</div>';
		htmlStr += '<div class="imgWrap upedImg"><span class="deleteImg">X</span>';
		htmlStr += '<img src="'+fr.result+'" alt="" />';
		htmlStr += '</div>';
		htmlStr += '</div>';
		$('.imgOnloadWrap').append(htmlStr);
		obj.value = '';
	}
	fr.readAsDataURL(imgFile);
}
/*-----------------------------刪除圖片------------------------------*/
$(document).on('click','.upedImg .deleteImg',function(){
	//處理未來事件
	$(this).parent().parent().remove();
})