<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>使用FileReader对象的readAsDataURL方法回显图片</title>
		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
	</head>
	
<body>
	<script type="text/javascript">  
     function changImg(e){  
        for (var i = 0; i < e.target.files.length; i++) {  
            var file = e.target.files.item(i); 
            //正则表达式判断文件类型是否为图片
            while (!(/^image\/.*$/i.test(file.type))) {              	
                  
                alert('不是图片');
                break;//不是图片 就跳出这一次循环
            }  
            //实例化FileReader 
            var freader = new FileReader(); 
            //FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL
            //readAsDataURL方***使用base-64进行编码
            //编码的资料由data字串开始，后面跟随的是MIME type，然后再加上base64字串，逗号之后就是编码过的图像文件的内容。
            freader.readAsDataURL(file);  
            freader.onload = function(e) { 
            	//更改img的src属性
                $("#myImg").attr("src",e.target.result);  
            }  
        }  
    }  
</script> 

<form action="">  
   <input type="file" name="files" accept="image/*" οnchange="changImg(event)" >
   <img alt="暂无图片" id="myImg"  height="200px",width="200px">  
</form> 
</body>  
 
</html>