这篇文章主要介绍了JavaScript实现预览本地上传图片功能,结合完整实例形式分析了javascript图片预览相关的格式正则验证、浏览器判断、页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
本文实例讲述了JavaScript实现预览本地上传图片功能。分享给大家供大家参考，具体如下：
<html> <head> <title> 图片上传预览</title> <script> function PreviewImage(imgFile) { var pattern = /(\.*.jpg$)|(\.*.png$)|(\.*.jpeg$)|(\.*.gif$)|(\.*.bmp$)/; if (!pattern.test(imgFile.value)) { alert("系统仅支持jpg/jpeg/png/gif/bmp格式的照片！"); imgFile.focus(); } else { var path; if (document.all) {//IE imgFile.select(); path = document.selection.createRange().text; document.getElementById("imgPreview").innerHTML = ""; document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")";//使用滤镜效果 } else {//FF path = URL.createObjectURL(imgFile.files[0]); document.getElementById("imgPreview").innerHTML = "<img src='"https://www.jb51.net/article/+path+"'/>"; } } } </script> </head> <body> <div> <input type="file" onchange='PreviewImage(this)' /> <div> <img src="" /> </div> </div> </body> </html>
使用在线HTML/CSS/JavaScript代码运行工具：测试上述代码，可得如下运行效果：
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript图片操作技巧大全》、《JavaScript切换特效与技巧总结》、《JavaScript运动效果与技巧汇总》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章: