jQuery多尺寸图片上传预览代码.zip资源-CSDN文库

共10个文件

js：3个

css：2个

woff2：1个

版权申诉

jQuery特效

CSS特效

网页特效

63 浏览量 2023-10-14 23:59:38 上传评论收藏 148KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

jQuery多尺寸图片上传预览代码.zip （10个子文件）

jiaoben7133

bootstrap.min.js 35KB

index.js 588B

jquery.min.js 91KB

css

bootstrap.css 138KB

index.css 286B

index.html 2KB

fonts

glyphicons-halflings-regular.ttf 44KB

glyphicons-halflings-regular.woff 23KB

glyphicons-halflings-regular.eot 20KB

glyphicons-halflings-regular.woff2 18KB

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>jQuery多尺寸图片上传预览代码 - 【更多源码：www.96flw.com】</title> <script src="js/jquery.min.js"></script> <link rel="stylesheet" href="css/bootstrap.css"> <script src="js/bootstrap.min.js"></script> <link rel="stylesheet" href="css/index.css"> </head> <body> <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 src="js/index.js"></script> <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';"> <p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p> <p>更多源码：<a href="http://www.96flw.com/" target="_blank">www.96flw.com</a></p> </div> </body> </html>

评论收藏

内容反馈

版权申诉