实现图片上传预览前端开发功能插件（简易版）

由前端开发者 · 2018年5月20日20:34:07

摘要：前端开发功能插件|前端开发者图片上传预览功能上传图片预览 <!doctype html> <html lang=”en”> <head> <title>dsadsads</tit……

前端开发功能插件|前端开发者

图片上传预览功能

上传图片预览

<!doctype <a href="https://www.rokub.com/category/html" title="html">html</a>> <<a href="https://www.rokub.com/category/html" title="html">html</a> lang=”en”> <head> <title>dsadsads</title> <script src=”http://libs.baidu.com/<a href="https://www.rokub.com/category/jquery" title="jquery">jquery</a>/1.7.2/<a href="https://www.rokub.com/category/jquery" title="jquery">jquery</a>.min.<a href="https://www.rokub.com/category/javascript" title="js">js</a>”></script> <style> *{margin:0;padding:0;list-style:none} .clearfix:after{content:””;display:block;clear:both;} .clearfix{zoom:1;} .container{ width: 1100px; margin:0 auto; } .item{ background:#ccc; } .item li{ font-size:20px; line-height: 50px; float:left; margin:5px 90px; padding:5px 20px; border:1px solid #fff; } #warp div{ display:none; } .warp li{ width: 100px; height: 100px; float:left; border:1px dotted #000; margin:50px; position:relative; display:none; } .warp li b{ width: 100px; height: 100px; position: absolute; z-index:-1; font-size:50px; line-height:100px; text-align:center; } .warp li input{ width: 100px; height: 100px; opacity:0 } .warp li strong{ position:absolute; right:2px; top:2px; background:#ccc; padding:5px; cursor:pointer; display:none; z-index:66; } .warp li img{display:none} </style> </head> <body> <div class=”container”> <ul class=”item clearfix” id=”item”> <li>卫生间</li> <li>厨房</li> <li>阳台</li> <li>窗台</li> </ul> <div id=”warp”> <div style=”display:block”> <h3> 请上传卫生间图片细节说明 <hr> </h3> <ul class=”warp clearfix” > <li style=”display:block”> + X <input type=”file” id=”up_img_WU_FILE_0″ /> <img id=”imgShow_WU_FILE_0″ width=”100″ height=”100″ /> </li> <li> + X <input type=”file” id=”up_img_WU_FILE_1″ /> <img id=”imgShow_WU_FILE_1″ width=”100″ height=”100″ /> </li> <li> + X <input type=”file” id=”up_img_WU_FILE_2″ /> <img id=”imgShow_WU_FILE_2″ width=”100″ height=”100″ /> </li> <li> + X <input type=”file” id=”up_img_WU_FILE_3″ /> <img id=”imgShow_WU_FILE_3″ width=”100″ height=”100″ /> </li> <li> + X <input type=”file” id=”up_img_WU_FILE_4″ /> <img id=”imgShow_WU_FILE_4″ width=”100″ height=”100″ /> </li> </ul style> </div> <div> <h3> 请上传厨房图片细节说明 <hr> </h3> <ul class=”warp clearfix”> <li style=”display:block”> + X <input type=”file” id=”up_img_WU_FILE_5″ /> <img id=”imgShow_WU_FILE_5″ width=”100″ height=”100″ /> </li> <li> + X <input type=”file” id=”up_img_WU_FILE_6″ /> <img id=”imgShow_WU_FILE_6″ width=”100″ height=”100″ /> </li> <li> + X <input type=”file” id=”up_img_WU_FILE_7″ /> <img id=”imgShow_WU_FILE_7″ width=”100″ height=”100″ /> </li> </ul> </div> <div> <h3> 请上传阳台图片细节说明 <hr> </h3> <ul class=”warp clearfix”> <li style=”display:block”> + X <input type=”file” id=”up_img_WU_FILE_8″ /> <img id=”imgShow_WU_FILE_8″ width=”100″ height=”100″ /> </li> <li> + X <input type=”file” id=”up_img_WU_FILE_9″ /> <img id=”imgShow_WU_FILE_9″ width=”100″ height=”100″ /> </li> <li> + X <input type=”file” id=”up_img_WU_FILE_10″ /> <img id=”imgShow_WU_FILE_10″ width=”100″ height=”100″ /> </li> </ul> </div> <div> <h3> 请上传窗台图片细节说明 <hr> </h3> <ul class=”warp clearfix”> <li style=”display:block”> + X <input type=”file” id=”up_img_WU_FILE_11″ /> <img id=”imgShow_WU_FILE_11″ width=”100″ height=”100″ /> </li> <li> + X <input type=”file” id=”up_img_WU_FILE_12″ /> <img id=”imgShow_WU_FILE_12″ width=”100″ height=”100″ /> </li> <li> + X <input type=”file” id=”up_img_WU_FILE_13″ /> <img id=”imgShow_WU_FILE_13″ width=”100″ height=”100″ /> </li> </ul> </div> </div> </div> </body> </<a href="https://www.rokub.com/category/html" title="html">html</a>> <script> var uploadPreview = function(setting) { var _self = this; _self.IsNull = function(value) { if (typeof (value) == “function”) { return false; } if (value == undefined || value == null || value == “” || value.length == 0) { return true; } return false; } _self.DefautlSetting = { UpBtn: “”, DivShow: “”, ImgShow: “”, Width: 100, Height: 100, ImgType: [“gif”, “jpeg”, “jpg”, “bmp”, “png”], ErrMsg: “选择文件错误,图片类型必须是(gif,jpeg,jpg,bmp,png)中的一种”, callback: function() { } }; _self.Setting = { UpBtn: _self.IsNull(setting.UpBtn) ? _self.DefautlSetting.UpBtn : setting.UpBtn, DivShow: _self.IsNull(setting.DivShow) ? _self.DefautlSetting.DivShow : setting.DivShow, ImgShow: _self.IsNull(setting.ImgShow) ? _self.DefautlSetting.ImgShow : setting.ImgShow, Width: _self.IsNull(setting.Width) ? _self.DefautlSetting.Width : setting.Width, Height: _self.IsNull(setting.Height) ? _self.DefautlSetting.Height : setting.Height, ImgType: _self.IsNull(setting.ImgType) ? _self.DefautlSetting.ImgType : setting.ImgType, ErrMsg: _self.IsNull(setting.ErrMsg) ? _self.DefautlSetting.ErrMsg : setting.ErrMsg, callback: _self.IsNull(setting.callback) ? _self.DefautlSetting.callback : setting.callback }; _self.getObjectURL = function(file) { var url = null; if (window.createObjectURL != undefined) { url = window.createObjectURL(file); } else if (window.URL != undefined) { url = window.URL.createObjectURL(file); } else if (window.webkitURL != undefined) { url = window.webkitURL.createObjectURL(file); } return url; } _self.Bind = function() { document.getElementById(_self.Setting.UpBtn).onchange = function() { if (this.value) { if (!RegExp(“\.(” + _self.Setting.ImgType.join(“|”) + “)$”, “i”).test(this.value.toLowerCase())) { alert(_self.Setting.ErrMsg); this.value = “”; return false; } if (navigator.userAgent.indexOf(“MSIE”) > -1) { try { document.getElementById(_self.Setting.ImgShow).src = _self.getObjectURL(this.files[0]); } catch (e) { var div = document.getElementById(_self.Setting.DivShow); this.select(); top.parent.document.body.focus(); var src = document.selection.createRange().text; document.selection.empty(); document.getElementById(_self.Setting.ImgShow).style.display = “none”; div.style.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)”; div.style.width = _self.Setting.Width + “px”; div.style.height = _self.Setting.Height + “px”; div.filters.item(“DXImageTransform.Microsoft.AlphaImageLoader”).src = src; } } else { document.getElementById(_self.Setting.ImgShow).src = _self.getObjectURL(this.files[0]); } _self.Setting.callback(); } } } _self.Bind(); } function file_click(){ var WARP = document.getElementById(‘warp’); var WARP_LI = WARP.getElementsByTagName(‘li’); for(var i=0; i<WARP_LI.length;i++){ new uploadPreview({ UpBtn: “up_img_WU_FILE_”+i, ImgShow: “imgShow_WU_FILE_”+i}); } } window.onload = file_click; </script> <script> $(function(){ var n=1; $(‘input’).on(‘change’,function(){ $(this).parent().find(‘strong’).show(); $(this).hide().siblings(‘img’).show(); $(this).parent().find(‘span’).html($(this).val().substring($(this).val().lastIndexOf(‘\\’)+1)); $(this).parent().next().show(); if($(this).parent().parent().children().size()==n){ return false; }else{ $(this).parent().next().show(); n++; } }); $(‘#warp li strong’).on(‘click’,function(){ $(this).siblings(‘input’).val(”); $(this).siblings(‘img’).hide(); $(this).hide(); $(this).siblings(‘input’).show(); $(this).parent().find(‘span’).html(”); }); $(‘#item li’).on(‘click’,function(){ $(‘#warp’).children().eq($(this).index()).toggle(); }) }) </script>

前端开发功能插件|网站前端开发

https://www.rokub.com

» 本文来自：前端开发者 » 《实现图片上传预览前端开发功能插件（简易版）》

» 本文链接地址：https://www.rokub.com/2935.html

» 您也可以订阅本站：https://www.rokub.com