javascript预览上传的本地图片

<form id="myForm" runat="server">

<div>

<input type="file" name="updFile" id="updFile" onchange="Change()"/>

</div>

<div id="imgFiles"></div>

<script type="text/javascript">

function Change() {

var x = document.getElementById("updFile");

var imgAll = document.getElementById("imgFiles");

if (!x || !x.value) return;

var patn = /\.jpg$|\.jpeg$|\.gif$/i;

if (patn.test(x.value)) {

var y = document.getElementById(x.value);

//判断原图片是否存在，如果存在，则不加载进来

if (y) return

var newFileName = document.getElementById("updFile").value;

var imgHtml = "<div><h1 id=\"" + newFileName + "\" style=\"border: 1px solid black; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);width: 100px; height: 100px\"></h1><INPUT type=\"button\" NAME=\"Delete\" value=\"删除\" onclick=\"delFile(this)\"></div>";

var objFiles = document.getElementById("imgFiles");

document.getElementById('imgFiles').insertAdjacentHTML("beforeEnd", imgHtml)

document.getElementById(newFileName).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = newFileName;

document.getElementById(newFileName).style.width = document.getElementById(newFileName).offsetWidth;

document.getElementById(newFileName).style.height = document.getElementById(newFileName).offsetHeight;

document.getElementById(newFileName).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "scale";

}

else {

alert("您选择的似乎不是图像文件。");

}

}

function delFile(obj) {

obj.parentElement.removeNode(true);

}

</script>

</form>