废话不多说了，直接给大家贴js代码了，具体代码如下所示：
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
</head>
<body>
<div id="divpreview">
<img id="imgheadphoto" src="noperson.jpg" style="width: 160px; height: 170px; border: solid 1px #d2e2e2;"
alt="" />
</div>
<input type="file" onchange="previewimage(this,'imgheadphoto','divpreview');" size="20" />
<script type="text/javascript">
//js本地图片预览，兼容ie[6-9]、火狐、chrome17+、opera11+、maxthon3
function previewimage(fileobj, imgpreviewid, divpreviewid) {
var allowextention = ".jpg,.bmp,.gif,.png"; //允许上传文件的后缀名document.getelementbyid("hfallowpicsuffix").value;
var extention = fileobj.value.substring(fileobj.value.lastindexof(".") + 1).tolowercase();
var browserversion = window.navigator.useragent.touppercase();
if (allowextention.indexof(extention) > -1) {
if (fileobj.files) {//html5实现预览，兼容chrome、火狐7+等
if (window.filereader) {
var reader = new filereader();
reader.onload = function (e) {
document.getelementbyid(imgpreviewid).setattribute("src", e.target.result);
}
reader.readasdataurl(fileobj.files[0]);
} else if (browserversion.indexof("safari") > -1) {
alert("不支持safari6.0以下浏览器的图片预览!");
}
} else if (browserversion.indexof("msie") > -1) {
if (browserversion.indexof("msie 6") > -1) {//ie6
document.getelementbyid(imgpreviewid).setattribute("src", fileobj.value);
} else {//ie[7-9]
fileobj.select();
if (browserversion.indexof("msie 9") > -1)
fileobj.blur(); //不加上document.selection.createrange().text在ie9会拒绝访问
var newpreview = document.getelementbyid(divpreviewid + "new");
if (newpreview == null) {
newpreview = document.createelement("div");
newpreview.setattribute("id", divpreviewid + "new");
newpreview.style.width = document.getelementbyid(imgpreviewid).width + "px";
newpreview.style.height = document.getelementbyid(imgpreviewid).height + "px";
newpreview.style.border = "solid 1px #d2e2e2";
}
newpreview.style.filter = "progid:dximagetransform.microsoft.alphaimageloader(sizingmethod='scale',src='" + document.selection.createrange().text + "')";
var tempdivpreview = document.getelementbyid(divpreviewid);
tempdivpreview.parentnode.insertbefore(newpreview, tempdivpreview);
tempdivpreview.style.display = "none";
}
} 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", fileobj.files[0].getasdataurl());
} else {//firefox7.0+
document.getelementbyid(imgpreviewid).setattribute("src", window.url.createobjecturl(fileobj.files[0]));
}
} else {
document.getelementbyid(imgpreviewid).setattribute("src", fileobj.value);
}
} else {
alert("仅支持" + allowextention + "为后缀名的文件!");
fileobj.value = ""; //清空选中文件
if (browserversion.indexof("msie") > -1) {
fileobj.select();
document.selection.clear();
}
fileobj.outerhtml = fileobj.outerhtml;
}
return fileobj.value; //返回路径
}
</script>
</body>
</html>
以上所述是小编给大家介绍的js实现图片上传预览功能