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

共10个文件

js：3个

css：2个

woff2：1个

版权申诉

jquery特效

jquery代码

jquery插件库

10 浏览量 2023-09-21 00:00:43 上传评论收藏 147KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

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

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多尺寸图片上传预览代码</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> </body> </html>

评论收藏

内容反馈

版权申诉