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>