本文介绍了使用JavaScript在本地实现图片预览的两种方案。针对现代浏览器，利用HTML5 FileReader API读取文件并生成Data URL进行显示；针对IE浏览器，通过select和selection.createRange获取本地路径，并设置滤镜实现预览。代码包含文件类型校验逻辑，确保仅处理指定格式的图片文件。
JavaScript本地图片预览功能实现
本文详细介绍如何使用JavaScript实现本地图片的即时预览功能，相关代码示例可供开发者参考与借鉴。
移动Web环境下的预览
移动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浏览器的处理方案
兼容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;
}
}
如需了解更多JavaScript相关知识，推荐参考本站专题：《JavaScript图片操作技巧大全》、《JavaScript切换特效与技巧总结》、《JavaScript运动效果与技巧汇总》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》。
希望上述关于JavaScript程序设计的说明能为您提供帮助。