JavaScript实现预览本地上传图片功能完整示例
2019-03-28 10:59
866 查看
本文实例讲述了JavaScript实现预览本地上传图片功能。分享给大家供大家参考,具体如下:
<html> <head> <title>www.jb51.net 图片上传预览</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='"+path+"'/>"; } } } </script> </head> <body> <div> <input type="file" onchange='PreviewImage(this)' /> <div id="imgPreview" style='width: 500px; height: 400px;'> <img src="" /> </div> </div> </body> </html>
使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码,可得如下运行效果:
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript图片操作技巧大全》、《JavaScript切换特效与技巧总结》、《JavaScript运动效果与技巧汇总》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- JavaScript实现本地图片上传预览功能(兼容IE、chrome、FF)
- JavaScript实现图片本地预览功能【不用上传至服务器】
- JavaScript实现本地图片上传预览功能(兼容IE、chrome、FF)
- 关于IE 中上传图片时用JavaScript预览本地图片的功能失效
- 图片上传时实现本地预览功能的原理解析
- jquery实现兼容浏览器的图片上传本地预览功能
- vue.js 实现图片本地预览 裁剪 压缩 上传功能
- 实现本地图片预览上传的功能
- HTML5本地拖拽上传实现图片预览功能的实践总结
- 基于jquery实现图片上传本地预览功能
- JavaScript中的FileReader图片预览上传功能实现代码
- 实现图片上传前本地预览功能之二
- JS中利用FileReader实现上传图片前本地预览功能
- 详解nodejs实现本地上传图片并预览功能(express4.0+)
- jquery实现图片上传前本地预览功能
- JavaScript实现无刷新上传预览图片功能
- JavaScript实现本地图片上传前进行裁剪预览
- jQuery实现本地预览上传图片功能
- jquery实现图片上传前本地预览功能
- JavaScript实现图片上传预览功能