知向前端
首页
微语
登录
base64位多组图片显示美化并上传
2016-11-12 Jon
js 选择单个base64位图片
<br /> <!DOCTYPE html><br /> <html lang="en"><br /> <head><br /> <meta charset="UTF-8"><br /> <title>js 选择多组base64位图片</title><br /> <style><br /> .showImg img{<br /> height:100px;<br /> }<br /> .select-img-box {<br /> position: relative;<br /> display: inline-block;<br /> background: #D0EEFF;<br /> border: 1px solid #99D3F5;<br /> border-radius: 4px;<br /> padding: 4px 12px;<br /> overflow: hidden;<br /> color: #1E88C7;<br /> text-decoration: none;<br /> text-indent: 0;<br /> line-height: 20px;<br /> }<br /> .select-img-box input {<br /> position: absolute;<br /> font-size: 100px;<br /> right: 0;<br /> top: 0;<br /> opacity: 0;<br /> height: 30px;<br /> }<br /> .select-img-box:hover {<br /> background: #AADFFD;<br /> border-color: #78C3F3;<br /> color: #004974;<br /> text-decoration: none;<br /> }<br /> </style><br /> </head><br /> <body><br /> <input type="file" id="select-img" multiple="multiple"><br /> <div class="showImg"></div><br /> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script><br /> <script><br /> var selectImg = document.getElementById('select-img');<br /> $('body').on('change', '#select-img', function(){<br /> if (!window.FileReader) {<br /> alert('您的浏览器不支持 HTML5 的 FileReader，请更换谷歌浏览器上传图片！');<br /> }else{<br /> for(var i=0; i<selectImg.files.length; i++){<br /> var imgFile = new FileReader();<br /> imgFile.readAsDataURL(selectImg.files[i]);<br /> imgFile.onload = function () {<br /> var imgData = this.result; //base64数据<br /> $('.showImg').append('<img id="imgShow" src="'+imgData+'" alt="">');<br /> }<br /> }<br /> }<br /> });<br /> </script><br /> </body><br /> </html><br />
运行代码
您可以修改框中代码后运行查看
js 选择多组base64位图片 美化选择框
<br /> <!DOCTYPE html><br /> <html lang="en"><br /> <head><br /> <meta charset="UTF-8"><br /> <title>js 选择多组base64位图片 美化type=file</title><br /> <style><br /> .showImg img{<br /> height:100px;<br /> }<br /> .table-upload-img {<br /> position: relative;<br /> display: inline-block;<br /> overflow: hidden;<br /> text-decoration: none;<br /> text-indent: 0;<br /> font-size: 38px;<br /> border: 1px dashed #ccc;<br /> color: #ddd;<br /> text-align: center;<br /> width: 26px;<br /> height: 24px;<br /> line-height: 24px;<br /> margin: 0 auto;<br /> }<br /> .table-upload-img .select-img {<br /> position: absolute;<br /> font-size: 100px;<br /> right: 0;<br /> top: 0;<br /> opacity: 0;<br /> height: 30px;<br /> }<br /> </style><br /> </head><br /> <body><br /> <div class="img-group"><br /> <a href="javascript:;" class="table-upload-img">+<br /> <input type="file" class="select-img" multiple="multiple" accept="image/x-png,image/gif,image/jpeg,image/bmp"><br /> </a><br /> <div class="showImg" data-img=""></div><br /> </div><br /> <div class="img-group"><br /> <a href="javascript:;" class="table-upload-img">+<br /> <input type="file" class="select-img" multiple="multiple" accept="image/x-png,image/gif,image/jpeg,image/bmp"><br /> </a><br /> <div class="showImg" data-img=""></div><br /> </div><br /> <div class="img-group"><br /> <a href="javascript:;" class="table-upload-img">+<br /> <input type="file" class="select-img" multiple="multiple" accept="image/x-png,image/gif,image/jpeg,image/bmp"><br /> </a><br /> <div class="showImg" data-img=""></div><br /> </div><br /> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script><br /> <script><br /> $('body').on('change', '.select-img', function(){<br /> if (!window.FileReader) {<br /> alert('您的浏览器不支持 HTML5 的 FileReader，请更换谷歌浏览器上传图片！');<br /> }else{<br /> var imgArr = [];<br /> var $this = $(this);<br /> var _this = $this.get(0);<br /> var len = _this.files.length;<br /> if(len<=5){<br /> for(var i=0; i<len; i++){<br /> var imgName = _this.files[i].name;<br /> var imgFile = new FileReader();<br /> imgFile.readAsDataURL(_this.files[i]);<br /> imgFile.onload = function () {<br /> var imgData = this.result; //base64数据<br /> $this.parent().next().append('<img class="imgShow" src="'+imgData+'" alt="">');<br /> imgArr.push(imgData);<br /> }<br /> }<br /> }else{<br /> alert('上传图片个数最多不能超过5个');<br /> }<br /> }<br /> });<br /> </script><br /> </body><br /> </html><br />
运行代码
您可以修改框中代码后运行查看
js 选择多组base64位图片 美化选择框2
<br /> <!DOCTYPE html><br /> <html lang="en"><br /> <head><br /> <meta charset="UTF-8"><br /> <title>js 选择多组base64位图片2</title><br /> <style><br /> .showImg img{<br /> height:100px;<br /> }<br /> .select-img-box {<br /> position: relative;<br /> display: inline-block;<br /> background: #D0EEFF;<br /> border: 1px solid #99D3F5;<br /> border-radius: 4px;<br /> padding: 4px 12px;<br /> overflow: hidden;<br /> color: #1E88C7;<br /> text-decoration: none;<br /> text-indent: 0;<br /> line-height: 20px;<br /> }<br /> .select-img-box input {<br /> position: absolute;<br /> font-size: 100px;<br /> right: 0;<br /> top: 0;<br /> opacity: 0;<br /> height: 30px;<br /> }<br /> .select-img-box:hover {<br /> background: #AADFFD;<br /> border-color: #78C3F3;<br /> color: #004974;<br /> text-decoration: none;<br /> }<br /> </style><br /> </head><br /> <body><br /> <div class="img-group"><br /> <a href="javascript:;" class="select-img-box">选择文件<br /> <input type="file" class="select-img" multiple="multiple" accept="image/x-png,image/gif,image/jpeg,image/bmp"><br /> </a><br /> <div class="showImg" data-img=""></div><br /> </div><br /> <div class="img-group"><br /> <a href="javascript:;" class="select-img-box">选择文件<br /> <input type="file" class="select-img" multiple="multiple" accept="image/x-png,image/gif,image/jpeg,image/bmp"><br /> </a><br /> <div class="showImg" data-img=""></div><br /> </div><br /> <div class="img-group"><br /> <a href="javascript:;" class="select-img-box">选择文件<br /> <input type="file" class="select-img" multiple="multiple" accept="image/x-png,image/gif,image/jpeg,image/bmp"><br /> </a><br /> <div class="showImg" data-img=""></div><br /> </div><br /> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script><br /> <script><br /> // var selectImg = document.getElementById('select-img');<br /> var selectImg = $('.select-img');<br /> $('body').on('change', '.select-img', function(){<br /> if (!window.FileReader) {<br /> alert('您的浏览器不支持 HTML5 的 FileReader，请更换谷歌浏览器上传图片！');<br /> }else{<br /> var imgArr = [];<br /> var $this = $(this);<br /> var _this = $this.get(0);<br /> var len = _this.files.length;<br /> if(len<=5){<br /> for(var i=0; i<len; i++){<br /> var imgName = _this.files[i].name;<br /> var imgFile = new FileReader();<br /> imgFile.readAsDataURL(_this.files[i]);<br /> imgFile.onload = function () {<br /> var imgData = this.result; //base64数据<br /> $this.parent().next().append('<img class="imgShow" src="'+imgData+'" alt="">');<br /> imgArr.push(imgData);<br /> }<br /> }<br /> }else{<br /> alert('上传图片个数最多不能超过5个');<br /> }<br /> }<br /> });<br /> </script><br /> </body><br /> </html><br />
运行代码
您可以修改框中代码后运行查看
发表评论：
昵称
邮件地址 (选填)
个人主页 (选填)
内容