//表单代码<div class="col-sm-offset-1 col-sm-7"> <div class="well"> 添加广告信息: <form action="" method="post"> <input type="file" class="filestyle" data-buttonName="btn-primary" id="upload" onchange="localShowImage();"> <img id="perview" src="" class="img-responsive" alt="通过不同的浏览器得到上传图片并显示到页面上_html/css_WEB-ITnose" > <input type="submit" class="btn btn-info" value="上传"> </form> </div></div>
登入後複製
<script type="text/javascript"> function getOS(){ var OsObject = ""; if(navigator.userAgent.indexOf("MSIE")>0) { return "MSIE"; } if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){ return "Firefox"; } if(isSafari=navigator.userAgent.indexOf("Safari")>0) { return "Safari"; } if(isCamino=navigator.userAgent.indexOf("Camino")>0){ return "Camino"; } if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){ return "Gecko"; } } function localShowImage() { // IE浏览器获取图片路径 this.getImgUrlByMSIE = function(fileid) { return document.getElementById(fileid).value; }; // 非IE浏览器获取图片路径 this.getImgUrlByUnMSIE = function(fileid) { var f = document.getElementById(fileid); return window.URL.createObjectURL(f.files[0]); }; var imgsrc=""; var fid ='upload'; alert("getOS() = "+ getOS()); if("MSIE" == getOS()) { imgsrc = this.getImgUrlByMSIE(fid); } else { imgsrc = this.getImgUrlByUnMSIE(fid); } document.getElementById('perview').src = imgsrc; }</script>
登入後複製