js实现的在本地预览图片功能示例
2019-12-02 18:11
806 查看
本文实例讲述了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; } }
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript图片操作技巧大全》、《JavaScript切换特效与技巧总结》、《JavaScript运动效果与技巧汇总》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- JS实现的input选择图片本地预览功能示例
- js实现上传图片本地预览功能以及限制图片的文件大小和尺寸大小
- JS中利用FileReader实现上传图片前本地预览功能
- 用js来读取本地文件---实现图片预览功能
- JavaScript实现预览本地上传图片功能完整示例
- jsp中js实现本地图片预览基本功能
- vue.js 实现图片本地预览 裁剪 压缩 上传功能
- 【转载】js 实现 本地图片预览
- JS实现上传本地图片前先预览
- 用js实现预览待上传的本地图片
- js 实现 本地图片预览
- JS实现图片上传本地预览
- 实现图片上传前本地预览功能之二
- js实现图片预览的功能
- 上传图片预览JS脚本 Input file图片预览的实现示例
- 上传图片预览功能的IE浏览器兼容性问题的实现:JS+JQuery+CSS完整版
- 纯JS实现的批量图片预览加载功能
- JS实现的简单图片切换功能示例【测试可用】
- js+java 实现图片在线预览功能
- jquery实现图片上传前本地预览功能