JS实现上传图片时预览

2012/11/8 15:17:25作者：佚名来源：网络

移动端

【实例名称】

JS实现上传图片时预览

【实例描述】

为了让用户确认选择的图片是否正确，网页可以提供客户端的图片预览功能。本例学习如何预览图片。

【实例代码】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>标题页-学无忧（www.xue51.com）</title>
</head>
<body>
<form name="form1" id="form1" method="post" action="#">
<input type="file" name="file1" id="file1" onchange="preview()"/>
</form>
<script type="text/javascript">
function preview()
{ 
var x = document.getElementById("file1");       
//获取上传控件
if(!x || !x.value) return;
var patn = /\.jpg$|\.jpeg$|\.gif$/i;            
//使用正则判断用户选择的文件类型
if(patn.test(x.value)){ 
var y = document.getElementById("img1");        
//获取图像控件
if(y){ y.src = 'file://localhost/' + x.value; } 
//获取图像源
else{ var img=document.createElement('img');    
//创建图像文件，并设置图像的高度、宽度和id
img.setAttribute('src','file://localhost/'+x.value); 
img.setAttribute('width','120'); 
img.setAttribute('height','90'); 
img.setAttribute('id','img1'); 
document.getElementById('form1').appendChild(img); } }
else{ alert("您选择的不是图像文件。"); }}
</script>
</body>
</html>

【运行效果】

上传图片时预览运行效果