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