本地预览图片html和js例子，直接上代码吧。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>测试本地图片预览</title>
</head>
<body>
<div>
<div id="preview_div" style="width: 200px; height: 200px; border: 1px solid #b6ff00; cursor: pointer;" onclick="previewFunc();">
<img id="preview_img" style="width:100%;height:200px;"/>
<input id="upload_img" type="file" style="width:0px;height:0px;" />
</div>
</div>
</body>
</html>
<script type="text/javascript">
function previewFunc()
{
document.getElementById("upload_img").click();
}
//值改变的话
document.getElementById("upload_img").onchange = function () {
var sender = this;
if (!sender.value.match(/.jpg|.gif|.png|.bmp/i)) {
alert('图片格式无效！');
return false;
}
var objPreviewImg = document.getElementById('preview_img');
var objPreviewDiv = document.getElementById('preview_div');
if (navigator.userAgent.indexOf("MSIE") > -1) {
//IE浏览器的话
try {
objPreviewImg.src = createFileObj(this.files[0]);
}
catch (e) {
//ie7中不兼容出错跳到这里
this.select(); //选择的时候
top.parent.document.body.focus(); //如果要嵌套到iframe中进行显示的话，需要加这个将焦点聚到iframe里面
this.blur(); //必须要加这个
var src = document.selection.createRange().text; //IE 11中改为如下:document.selection ---》 window.getSelection
document.selection.empty();
objPreviewImg.style.display = "none"; //隐藏img控件
objPreviewDiv.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
objPreviewDiv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src;
}
} else {
//chrome firfox都可以
objPreviewImg.src = createFileObj(this.files[0]);
}
}
function createFileObj(filePath)
{
var url = null;
if (window.createObjectURL != undefined) {
url = window.createObjectURL(filePath);
} else if (window.URL != undefined) {
url = window.URL.createObjectURL(filePath);
} else if (window.webkitURL != undefined) {
url = window.webkitURL.createObjectURL(filePath);
}
else {
}
return url;
}
</script>
//----------------------------------------------------------------------
以上需要注意的地方是
<input id="upload_img" type="file" style="width:0px;height:0px;" />
注意不能用display:none的样式进行隐藏，否则ie7中无论如何都不能获取到对应value值。
以上代码嵌套到iframe中也是可以进行预览的，如果自己想封装组件的朋友可以自己再封装一下，或者用jQuery重写一下就OK了。