每天一個jquery外掛

——圖片的預覽

作為一個萌新前端，現在就處於一個知其然而不知其所以然的狀態，所以說打算每天敦促自己找一個jquery外掛進行模仿學習實現，今天打算偷懶，做一下筆記，關於圖片的預覽的。

用到一個叫做FileReader的大寶貝，幾乎所有主流瀏覽器都支援，下面上程式碼，做好筆記。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>圖片預覽</ 
title>
		<script src="js/jquery-3.4.1.min.js"></script>
		<style>
			#file{
				
			}
			#img{
				max-width: 600px;
				min-width: 200px;
				min-height: 200px;
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<p><input type="file" 
 id='file' /></p>
		<img id='img' />
	</body>
</html>
<script>
	var imgshow = function(id1,id2){
		//規定檔案型別
		$("#"+id1).attr("accept",".png,.gif,.jpg,.jpeg")
		$("#"+id1).change(function(){
			//取到這個檔案的資訊
			var file = $(this)[0].files[ 
0];
			//開始讀寫
			var reader = new FileReader();
			reader.readAsDataURL(file);
			reader.onload = function(){
				$("#"+id2).attr('src',this.result)
			}
		})
	}
	imgshow('file','img')
</script>

在這裡插入圖片描述

這是一個結尾o(￣▽￣)ｄ

每天學一個jquery拆件-圖片的預覽

每天一個jquery外掛

——圖片的預覽

每天學一個jquery拆件-圖片的預覽

每天學一個jquery外掛-仿樓梯滾動

每天學一個jquery外掛-彈出提示框2

每天學一個jquery外掛-圖示的動畫

每天學一個jquery外掛-記分牌效果

每天學一個jquery外掛-B站的景深

每天學一個jquery外掛-密碼的等級

每天學一個jquery外掛-滑鼠的特效

每天學一個jquery外掛-做個點名器

每天學一個jquery外掛-css實現電風扇2

每天學一個jquery外掛-五角星打分

每天學一個jquery外掛-五角星打分2

每天學一個jquery外掛-省市縣聯動

每天學一個jquery外掛-做拖動效果1

每天學一個jquery外掛-滑動的底邊

每天學一個jquery外掛-自定義標題

jQuery+css實現的點選圖片放大縮小預覽功能示例【圖片預覽檢視大圖】

jquery完整的前端上傳圖片功能（帶自定義圖片預覽效果驗證尺寸大小驗證圖片格式）

java實現檔案上傳、下載、圖片預覽

vue+vant使用圖片預覽功能ImagePreview的問題解決

每天學一個jquery拆件-圖片的預覽

每天一個jquery外掛

——圖片的預覽

相關推薦