实现的效果:单图片上传前预览
兼容性:
火狐:不是太低就成,我用了最近较新的几个版本,都没有问题
IE:暂时就用过IE8、9、10、11
HTML代码:
<body> <div class="file-box"> <input type='text' name='textfield' id='textfield' class='systext' /> <!--文本框--> <input type='button' class='but uploadbtn' value='浏览...' /><!--浏览按钮--> <input type="file" name="applogo" class="file" size="28" onchange="preview(this);" id="applogo"/> <!--真正的浏览按钮,用来打开上传页面,前面的“浏览”按钮掩盖此按钮,为好看--> </div> <br /> <br /> <!--预览区--> <div id="preview"> <img src="1.jpg" width="297"/> <!--只定义宽度就成,高度浏览器会等比例的自动调节--> </div> </body>
样式:
<style type="text/css"> body{ background:none;} #imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}/*这个必须加,为IE*/ .systext{width:238px; height:28px; line-height:28px; float:left; border:1px solid #ccc; } .file-box{ position:relative;width:640px} .uploadbtn{ height:30px; width:60px; margin-left:3px; float:left; } .but { width:102px; height:25px; line-height:24px; margin-bottom: 3px; border:0px; background:#1381c9; color: #fff; cursor:pointer; } .file{ position:absolute; top:0px; left:0px; height:28px; filter:alpha(opacity:0);opacity: 0;width:310px; line-height:28px; } </style>
导入的JQuery文件(用的是1.4.2的):
<script type="text/javascript" src="jquery-1.4.2.js"></script>
JS文件:
<script type="text/javascript"> //预览 function preview(file){ document.getElementById("textfield").value=$(file).val(); //判断当前上传的文件是不是图片文件 if(!(/(?:jpg|gif|png)$/i.test(file.value))){//只判断jpg|gif|png格式,其他的格式可以往后追加 alert("只支持jpg、gif、png的图片"); $(file).val(""); return false; } var prevDiv = document.getElementById("preview");//获取预览区DIV对象 if(file.files && file.files[0]){//火狐系列 prevDiv.innerHTML=""; prevDiv.innerHTML="<img id='imghead' width='297'/>";//浏览器等比例的自动调节 var img = document.getElementById("imghead"); var reader = new FileReader(); reader.onloadend = function(evt){ img.src=evt.target.result; }; reader.readAsDataURL(file.files[0]); }else{//IE系列 var sFilter = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="'; file.select(); var src = document.selection.createRange().text; prevDiv.innerHTML=""; prevDiv.innerHTML = "<div id='divhead' style='width:297px;height:187px;"+sFilter+src+"\"'></div>";//用style定义的样式,浏览器好像不会自动调节,所以得自定义 } } </script>
以上实现的是单图片的预览,以下是多图片的预览,因为用的是FileReader而IE系列不支持这个,所以不兼容IE。
HTML
<body> <div class="file-box"> <input type='text' name='textfield' id='textfield' class='systext' /> <!--文本框--> <input type='button' class='but uploadbtn' value='浏览...' /><!--浏览按钮--> <input type="file" name="applogo" class="file" size="28" onchange="preview(this);" id="applogo" multiple="multiple"/> <!--真正的浏览按钮,用来打开上传页面,前面的“浏览”按钮掩盖此按钮,为好看--> </div> <br /> <br /> <!--预览区--> <div id="preview"></div> </body>
相关推荐
js上传前预览图片,兼容IE,firefox,google
兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览
纯javascript实现上传图片前图片预览,判断图片大小,兼容ie-7到10 firefox chrome,非常不错,分享给大家。
Jsp图片预览程序(含Java源码) 目前,很多网站都在为提升用户体验而努力,想尽多种办法让用户在网站上...程序中的JavaScript部分兼容ie6/7/8, firefox 3.5.5以及opera 10、safari 4.0.4、 chrome 3.0 等多种浏览器。
js上传图片预览 兼容 ie 火狐
主要介绍了兼容最新firefox、chrome和IE的javascript图片预览实现代码,测试了浏览器firefox6、firefox12、chrome 25.0.1364.172 m、IE6-IE10 都兼容,需要的朋友可以参考下
主要介绍了js实现兼容IE、Firefox的图片缩放代码,涉及JavaScript操作图片元素的相关技巧,需要的朋友可以参考下
js预览图片兼容ie6,7,8,火狐等浏览器
javascript 上传并预览图片(兼容IE,6,7,8,9+,谷歌,火狐,Safari)移动端也可以。
2 兼容ie,firefox 3 实现判断文件大小。火狐下实现了上传前判断图片大小,ie下目前是采用ActiveXObject方法,但会弹框提示,不友好,提供ajax方式后台判断文件大小。 4 判断图片类型合法性。 5 上传前判断图片尺寸。...
JS选择图片预览功能 兼容IE火狐CHROME等主流浏览器
javascript 上传图片预览效果,兼容:ie6/7/8, firefox 3.5.5
兼容IE(678)FF缩略图的使用方法 在Web开发中,实现缩略图的功能是非常常见的需求,特别是在上传图片时,需要预览图片的缩略图。然而,在不同的浏览器中,实现缩略图的方法却有所不同,本文将介绍如何在IE(6、7、...
不论您使用的是 IE6 还是 IE7,还是火狐、均可以看到以下预览。 虽然可以在ie6,ie7,火狐预览、但在谷歌浏览器还是不行、哪位高人要是有更好的办法浏览、能否交流交流 收藏下,qq:253930407
//js本地图片预览,兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3 function PreviewImage(fileObj) { //创建dom元素 var divPreviewId = 'divPreview_' + fileObj.name; var imgPreviewId = 'imgHeadPhoto_...
jquery+html5实现图片上传并裁切功能,上传图片前可预览裁切效果,显示裁切框,应用jquery.Jcrop.min.js实现,兼容性方面,适用浏览器:FireFox、Chrome、Opera. 不支持IE8、360、Safari、傲游、搜狗、世界之窗。本...
兼容火狐和ie 说明:图片上传预览插件 上传的时候可以生成固定宽高范围内的等比例缩放图
最近也经常遇到浏览器兼容的问题,昨天遇到上传图片预览问题,发现IE8和火狐不能显示,弄了很久,早上终于解决了很高兴。故跟大家分享下,我也多是网上找的,自己总结的一下,希望对大家有点帮助。 我们一般根据IE6...