<!doctype html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>photo</title>  
<script type="text/javascript">


var reader = new FileReader();
function f_change(file){
    var img = document.getElementById('imgSdf');
    

    reader.onload = function(evt){
        

        img.src = evt.target.result;
    }
    reader.readAsDataURL(file.files[0]);
}
 
 
 
</script>
    <style>  
        /*样式1*/ 
        .a-upload {  
            padding: 4px 10px;  
            height: 20px;  
            line-height: 20px;  
            position: relative;  
            cursor: pointer;  
            color: #888;  
            background: #fafafa;  
            border: 1px solid #ddd;  
            border-radius: 4px;  
            overflow: hidden;  
            display: inline-block;  
            *display: inline;  
            *zoom: 1 
        }  
        .a-upload  input {  
            position: absolute;  
            font-size: 100px;  
            right: 0;  
            top: 0;  
            opacity: 0;  
            filter: alpha(opacity=0);  
            cursor: pointer 
        }  
        .a-upload:hover {  
            color: #444;  
            background: #eee;  
            border-color: #ccc;  
            text-decoration: none 
        }  
        /*样式2*/ 
        .file {  
            position: relative;  
            display: inline-block;  
            background: #D0EEFF;  
            border: 1px solid #99D3F5;  
            border-radius: 4px;  
            padding: 4px 12px;  
            overflow: hidden;  
            color: #1E88C7;  
            text-decoration: none;  
            text-indent: 0;  
            line-height: 20px;  
        }  
        .file input {  
            position: absolute;  
            font-size: 100px;  
            right: 0;  
            top: 0;  
            opacity: 0;  
        }  
        .file:hover {  
            background: #AADFFD;  
            border-color: #78C3F3;  
            color: #004974;  
            text-decoration: none;  
        }  
    </style>  
</head>  
<body style="padding: 10px">  
    <div align="center">
<a href="javascript:;" class="a-upload">  
    <input type="file" name="" id="" onchange="f_change(this);">点击这里上传文件  
</a>  
<a href="javascript:;" class="file">选择文件  
    <input type="file" name="" id="" onchange="f_change(this);">  
</a>  
</div>
<div>
    <img id="imgSdf">
</div>
</body>  
</html>

 

<html>
	<head>
	
		<title>photo</title>

        <script type="text/javascript">
//JS file 图片 即选即得 显示
//创建一个FileReader对象
var reader = new FileReader();
function f_change(file){
	var img = document.getElementById('imgSdf');
	//读取File对象的数据
	reader.onload = function(evt){
		//data:img base64 编码数据显示
		//img.width  =  "500";
       // img.height =  "500";
		img.src = evt.target.result;
	}
    reader.readAsDataURL(file.files[0]);
}
 
 
 
</script>

	</head>
<body>
	<div align="center">
	
		<input type="file" name="sdfFile" id="sdfFile" onchange="f_change(this);"><br><br>
		<img id="imgSdf">

</div>
</body>

</html>