上传文件,并显示。兼容 主流浏览器
直接上代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
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;
}
}
</script>
</head>
<body>
<form enctype="multipart/form-data" name="form1">
上传文件:
<input id="f" type="file" name="f" οnchange="change()" />
预览:
<img id="preview" alt="" name="pic" />
</form>
</body>
</html>
转自:http://www.markdream.com/technologies/programs/image-preview.shtml