JavaScript实现图片上传与即时预览功能
作者:小括号时间:2026-10-30 00:49:18浏览:406
本文介绍了一种基于JavaScript的图片上传及即时预览功能实现方案。通过判断浏览器对FileReader接口的支持情况,分别处理现代浏览器与IE6等旧版浏览器的文件读取逻辑,实现图片选择后的本地路径获取与标签src属性动态更新,从而在页面中即时展示上传的图片效果。
JavaScript实现图片上传与即时预览功能
本文通过一个具体实例,详细讲解了利用JavaScript实现图片上传并即时预览的功能,旨在为相关开发者提供参考与借鉴。
该功能参考了网络上的部分代码思路,整合开发出了一套能够实时处理图片上传并展示预览效果的解决方案。
<img id="imgTag" style="height: 100px;" alt="" />
<input type="file" />
function DisplayImage(fileTag,imgTagId){
var allowExtention=".jpg.png.gif";
var extentionArr=fileTag.value.split('.');
var extention = extentionArr[extentionArr.length-1];
if(!(allowExtention.indexOf(extention)>-1)){
alert("Please upload image!");
}else{
//for adveced broswer(the newest ie,chrome,ff)
if(typeof(FileReader)!=="undefined"){
var reader = new FileReader();
reader.readAsDataURL(fileTag.files[0]);
reader.onload = function(e){
document.getElementById(imgTagId).setAttribute("src", e.target.result);
}
}else{
//for(ie6)
document.getElementById(imgTagId).setAttribute("src",fileTag.value);
}
}
}
期望本文提供的技术方案能对从事JavaScript程序设计的读者在实际开发中有所帮助。
作者最新文章
JS语法错误会阻止加载吗?区分SyntaxError与资源加载失败
2026-11-05 16:08:46
JavaScript常见SyntaxError语法错误排查与修复方法
2026-11-05 13:58:44
JS中slice、substring和substr截取字符串的区别
2026-11-05 13:43:47
JS 转 TS 手动迁移最佳实践:从配置 tsconfig 到消除 any 类型
2026-11-05 11:53:32
为什么JS数组push后得到的是数字而不是数组?
2026-11-05 09:59:18
