ie 用 filter 对象
其它浏览器 则用 HTML5 中的 FileReader 对象
<html>
<head>
<meta charset="utf-8" />
</head>
<script>
/**
* 进行图片预览
*/
function change() {
var pic = document.getElementById("preview"), //显示图片的 img 元素
file = document.getElementById("f"); //选择图片的 file 元素
var ext = file.value.substring(file.value.lastIndexOf(".") + 1)
.toLowerCase(); //取用户选择的文件后辍名
var allow = 'jpeg,jpg,gif,png'; //设置允许的图片的格式
// gif在IE浏览器暂时无法显示
if (allow.indexOf(ext)=-1) { //图片格式不正确就返回
alert("图片的格式必须为png或者jpg或者gif或者jpeg格式!");
return;
}
//判断浏览器是 IE
var isIE = navigator.userAgent.match(/MSIE/) != null, isIE6 = navigator.userAgent
.match(/MSIE 6.0/) != null;
if (isIE) { // 是 IE
file.select();
//获取file域 中的 文件路径
var reallocalpath = document.selection.createRange().text;
// IE6浏览器设置img的src为本地路径可以直接显示图片
if (isIE6) { // 是 ie 6
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);
}
}
/**
* HTML 5 的方式读取
*/
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; // result属性包含的是以data URL编码的file/blob数据
}
}
</script>
<body>
<form enctype="multipart/form-data" name="form1">
<input id="f" type="file" name="f" οnchange="change()" />
<div class="upload">上传图片</div>
<p>预览:</p>
<p>
<img id="preview" alt="" name="pic" />
</p>
</form>
</body>
</html>
还有另一种方法
获取window 对象的 URL 属性
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
/**
* 从 file 域获取 本地图片 url
* file 域 id
* @return 返回所选文件的 id
*/
function getFileUrl(sourceId) {
var url;
if (navigator.userAgent.indexOf("MSIE") >= 1) { // IE
url = document.getElementById(sourceId).value;
} else if (navigator.userAgent.indexOf("Firefox") > 0) { // Firefox
url = window.URL
.createObjectURL(document.getElementById(sourceId).files
.item(0));
} else if (navigator.userAgent.indexOf("Chrome") > 0) { // Chrome
url = window.URL
.createObjectURL(document.getElementById(sourceId).files
.item(0));
}
return url;
}
/**
* 将本地图片 显示到浏览器上
* @param sourceId
* 文件域 的id
* @param targetId
* 用来显示图片的 元素 id
*/
function preImg(sourceId, targetId) {
// 取所选文件的 url
var url = getFileUrl(sourceId);
var imgPre = document.getElementById(targetId);
imgPre.src = url;
}
</script>
</head>
<body>
<form action="">
<input type="file" name="imgOne" id="imgOne"
οnchange="preImg(this.id,'imgPre');" />
<img id="imgPre" src="" width="300px"
height="300px" style="display: block;" />
</form>
</body>
</html>