JavaScript

超轻量级php框架startmvc

js实现的在本地预览图片功能示例

更新时间:2020-09-21 21:18:01 作者:startmvc
本文实例讲述了js实现的在本地预览图片功能。分享给大家供大家参考,具体如下:移动web&

本文实例讲述了js实现的在本地预览图片功能。分享给大家供大家参考,具体如下:

移动web


<body>
<form enctype="multipart/form-data" name="form1">
上传文件:<input id="f" type="file" name="f" onchange="change()" />
预览:<img id="preview" alt="" name="pic" width="300" height="150" />
</form>
<script>
function change() {
 var pic = document.getElementById("preview");
 var file = document.getElementById("f");
 var ext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase();//js获取文件名的后缀
 html5Reader(file);
 }
 function html5Reader(file){
 var file = file.files[0];
 var reader = new FileReader();
 reader.readAsDataURL(file);
 reader.onload = function(e){
 var pic = document.getElementById("preview");
 pic.src=this.result;
 }
 }
</script> 
</body>
</html>

兼容ie版本


function change() {
 var pic = document.getElementById("preview");
 var file = document.getElementById("f");
 var ext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase();
 // gif在IE浏览器暂时无法显示
 if(ext!='png'&&ext!='jpg'&&ext!='jpeg'){
 alert("文件必须为图片!"); return;
 }
 // IE浏览器
 if (document.all) {
 file.select();
 var reallocalpath = document.selection.createRange().text;
 var ie6 = /msie 6/i.test(navigator.userAgent);
 // IE6浏览器设置img的src为本地路径可以直接显示图片
 if (ie6) pic.src = reallocalpath;
 else {
 // 非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片,但是可以通过滤镜来实现
 pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" + reallocalpath + "\")";
 // 设置img的src为base64编码的透明图片 取消显示浏览器默认图片
 pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
 }
 }else{
 html5Reader(file);
 }
 }
 function html5Reader(file){
 var file = file.files[0];
 var reader = new FileReader();
 reader.readAsDataURL(file);
 reader.onload = function(e){
 var pic = document.getElementById("preview");
 pic.src=this.result;
 }
 }

js 本地预览图片