javascript上传图片时实现图片预览效果chrome用js上传图片预览
来源:原创
时间:2015-08-25
作者:脚本小站
分类:JS/JQuery
不同的浏览器实现方法不同,有些浏览器直接将图片地址改为本地图片就看预览,但有些浏览器则不行,如chrome浏览器。下面这个函数支持大部分浏览器实现上传预览效果。
下面代码可直接复制测试:
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title></title> </head> <body> 上传图片时,实现图片预览效果 <input type="file" id="img_file" value=""> <img src=".jpg" width="100" id="img" alt="" /> <script type="text/javascript"> var img_file = document.getElementById('img_file'); var img = document.getElementById('img'); img_file.onchange = function (){ getFullPath(img_file,img); } /* * 上传图片预览 * file_obj 上传文件表单对象 * img_obj 要显示图片的对象 */ function getFullPath(file_obj,img_obj){ if (file_obj) { //window.navigator.userAgent.indexOf("Firefox") 判断浏览器类型 if (window.navigator.userAgent.indexOf("MSIE") >= 1) { file_obj.select(); img_obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);"; img_obj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.selection.createRange().text; return; }else{ if (file_obj.files) { img_obj.src = window.URL.createObjectURL(file_obj.files.item(0));return; } img_obj.src = file_obj.value;return; } img_obj.src = file_obj.value; return; } } </script> </body> </html>