jQuery自定义图片尺寸上传预览特效代码
- 大小:68KB
- 分类:jQuery
- 环境:jquery
- 更新:2021-04-01
热门排行
简介

自定义 图片尺寸 上传预览。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>
文件目录结构

建议适用浏览器:360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。













chrome下载
知乎下载
Kimi下载
微信下载
天猫下载
百度地图下载
携程下载
QQ音乐下载