热门排行
简介
自定义 图片尺寸 上传预览。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及以下浏览器。