jQuery自定义图片尺寸上传预览特效代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

14 52 18



特效描述:自定义 图片尺寸 上传预览。jQuery图片上传功能制作设置不同尺寸单张图片上传预览效果。支持logo图片,个人头像,海报图片上传预览代码。

代码结构

1. 引入CSS

<link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.4/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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 图片头像上传 文件上传 文本框 下拉框 复选 单选 登录框 注册框 搜索框 验证码 二级联动 三级联动 城市选择 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 切换按钮 form表单

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到