参考了网络上相关文章，兼容个多浏览器，补充了使用框架时ie取不到路径的解决方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>上传文件</title>
<style type="text/css">
#imgView {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}
</style>
<script type="text/javascript">
var allowExtention = ".jpg,.bmp,.gif,.png"; //,图片允许上传文件的后缀名
function PreviewImage(obj, imgPreviewId, divPreviewId) {
var extention = obj.value.substring(obj.value.lastIndexOf(".") + 1).toLowerCase();
var browserVersion = window.navigator.userAgent.toUpperCase();
if (allowExtention.indexOf(extention) > -1) {
document.getElementById(divPreviewId).style.display="";
if (browserVersion.indexOf("MSIE") > -1) {
if (browserVersion.indexOf("MSIE 6.0") > -1) {//ie6
document.getElementById(imgPreviewId).setAttribute("src", obj.value);
} else {//ie[7-8]、ie9以上
obj.select();
obj.blur();
var src = document.selection.createRange().text;
var div = document.getElementById('divNewPreview');
if(src==""){
/* 如果当前页面放到框架如iframe里面，则在ie下src依然取到空值，
因为obj.blur()之后，file控件中原本被选中的文本将会失去选中的状态，因此，不能使用obj.blur()。
可以让当前页面上的其他元素，如div，button等或者父页面的body获得焦点即可。
注意，如果是div，则要确保div有至少1像素的高和宽，方可获得焦点。 */
obj.select();
window.parent.document.body.focus(); //或者document.getElementById("upbtn").focus();
src = document.selection.createRange().text;
}
div.innerHTML = '<img id="imgView">';
var img = document.getElementById('imgView');
var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
div.innerHTML = "<div id=divhead style='width:"+img.offsetWidth+"px;height:"
+img.offsetHeight+"px;"+sFilter+src+"\"'></div>";
}
} else if (browserVersion.indexOf("FIREFOX") > -1) {//firefox
var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
if (firefoxVersion < 7) {//firefox7以下版本
document.getElementById(imgPreviewId).setAttribute("src", obj.files[0].getAsDataURL());
} else {//firefox7.0+
document.getElementById(imgPreviewId).setAttribute("src", window.URL.createObjectURL(obj.files[0]));
}
} else if (obj.files) {
//兼容chrome、火狐等，HTML5获取路径
if (typeof FileReader !== "undefined") {
var reader = new FileReader();
reader.onload = function (e) {
document.getElementById(imgPreviewId).setAttribute("src", e.target.result);
}
reader.readAsDataURL(obj.files[0]);
} else if (browserVersion.indexOf("SAFARI") > -1) {
alert("暂时不支持Safari浏览器!");
}
} else {
document.getElementById(divPreviewId).setAttribute("src", obj.value);
}
} else {
document.getElementById(divPreviewId).style.display="none";
}
}
function upload(){
var file = document.getElementById("file5").value;
var extention = file.substring(file.lastIndexOf(".") + 1).toLowerCase();
if(file==""){
alert("您还没有选择文件！");
return;
}else {
if (allowExtention.indexOf(extention) == -1) {
alert("请选择"+allowExtention+"类型的文件！");
return;
}
}
form5.submit();
}
</script>
</head>
<body>
<form name="form5" id="form5" method="post" action="../uploadFileServlet" enctype="multipart/form-data">
<div >
<div style="margin-bottom:20px;">
<span style="font-family:微软雅黑; font-size:16px; color:red">请选择文件：</span>
<input type="file" name="file5" id="file5" onchange="PreviewImage(this,'imgView','divNewPreview')"/>
<input type="button" value="上传" onclick="upload();" id="upbtn"
style="width:80px;height:30px;font-size:20px;background-color:#69b3f2;border: 0 none;color:#fff ;cursor:pointer">
</div>
<div id="divNewPreview" style="padding-left:50px; display:none">
<img id="imgView" src="" alt="" />
</div>
</div>
</form>
</body>
</html>
