<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>javascript实现图片上传本地预览图片的代码-php自学网</title>
<script type="text/javascript">
function checkFiles(str, exStr) {
if (typeof (exStr) == ‘undefined‘)
exStr = ".jpg|.png|.gif|.jpeg";
var strRegex = "(" + exStr + ")$"; //用于验证图片扩展名的正则表达式
var re = new RegExp(strRegex);
if (re.test(str.toLowerCase())) {
return true;
}
else {
alert("文件名不合法,文件的扩展名必须为" + exStr + "格式");
return false;
}
}
//兼容IE6,IE7,IE8和Firefox的图片上传预览效果 By Zmor
function PreviewPic(id, obj) {
debugger;
var picPath = getFullPath(obj);
if (checkFiles(obj.value))
document.getElementById("Image1").src = picPath;
}
function getFullPath(obj) {
if (obj) {
//IE
if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
obj.select();
obj.blur();
// IE下取得图片的本地路径
return document.selection.createRange().text;
}
//firefox
else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
if (obj.files) {
// Firefox下取得的是图片的数据
return obj.files.item(0).getAsDataURL();
}
return obj.value;
}
return obj.value;
}
}
</script>
</head>
<body>
<div>
<input name="imgfile" type="file" id="imgfile" size="40" onchange="javascript:PreviewPic(‘Image1‘,this);" />
</div>
<div>
<img src="" id="Image1" />
</div>
</body>
</html>
原文：http://www.cnblogs.com/bdyjy/p/3643145.html