利用jQuery實現多尺寸圖片上傳預覽代碼



18 68 23



特效描述:利用jQuery實現 多尺寸 圖片上傳 預覽代碼,利用jQuery實現多尺寸圖片上傳預覽代碼

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/index.css">

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/index.js"></script>

3. HTML代碼

<div class="box">
	<p>上傳log</p>
	<p>
  <div class="upload imgLog">
	  <span><i class="glyphicon glyphicon-open"></i>上傳log0</span>		</div>
	</p>
	<p>上傳頭像</p>
	<p>
  <div class="upload imgLog2">
			<span><i class="glyphicon glyphicon-open"></i>上傳頭像</span>	  </div>
	</p>	
	<p>上傳海報</p>
	<p>
  <div class="upload imgLog3">
			<span><i class="glyphicon glyphicon-open"></i>上傳海報</span>	  </div>
	</p>		 	
</div>
<script>
	$(function(){
		var img1 = new ImgUpload('.imgLog',210,55,55);
		var img2 = new ImgUpload('.imgLog2',100,100,100);
		var img3 = new ImgUpload('.imgLog3',400,200,200);
		$(document).on('change',".imgLog input",function(e){
			//模擬后臺返回url
			var url = window.URL.createObjectURL(e.target.files[0]);
			$(this).parent().css('background','url('+url+')0% 0% / cover')
			console.log(window.URL.createObjectURL(e.target.files[0]))
			img1.setSpan(this)
		})
		$(document).on('change',".imgLog2 input",function(e){
			//模擬后臺返回url
			var url = window.URL.createObjectURL(e.target.files[0]);
			$(this).parent().css('background','url('+url+')0% 0% / cover')
			img2.setSpan(this)
		})	
		$(document).on('change',".imgLog3 input",function(e){
			//模擬后臺返回url
			var url = window.URL.createObjectURL(e.target.files[0]);
			$(this).parent().css('background','url('+url+')0% 0% / cover')
			img3.setSpan(this)
		})						
	})
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動星星打分 切換按鈕 表單 表單美化 表單插件 表單美化插件 其他 預覽 頭像上傳 圖片上傳
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子 湖北快三走势图遗漏 456棋牌电玩城app下载 快速时时彩是私彩吗 股票软件 大发棋牌官网下载安装 国家彩票中心地址 白姐49期四不像跑狗玄机图 农村的地种什么赚钱快 广东时时彩骗局 最新北京时时彩走势图 股票怎么就赚钱了 福建31选7开奖走势图历史走势图 最新足彩胜负彩任选9场 新闻网站是怎么赚钱的 五子棋七步必杀 安徽时时彩网