<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片上传</title>
<style type="text/css">
	body{ font-size:14px;}
	input{ vertical-align:middle; margin:0; padding:0}
	.file-box{ position:relative;width:340px}
	.txt{ height:22px; border:1px solid #cdcdcd; width:180px;}
	.btn{ background-color:#FFF; border:1px solid #CDCDCD;height:24px; width:70px;}
	.file{ position:absolute; top:0; right:80px; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px }
</style>
</head>
<body>
<div class="file-box">
  <form action="" method="post" enctype="multipart/form-data">
	<input type="text" name="textfield" id="textfield" class="txt" />  
	<input type="button" class="btn" value="浏览..." />
	<input type="file" name="fileField" class="file" id="fileField" size="28" onchange="document.getElementById("textfield").value=this.value" />
	<input type="submit" name="submit" class="btn" value="上传" />
	<div id="demo_result"></div>
  </form>
</div>
</body>
<script type="text/javascript">
	var result = document.getElementById("demo_result");
	var input = document.getElementById("fileField");
	if(typeof FileReader === "undefined"){
		result.innerHTML = '<p class="warn">抱歉，你的浏览器不支持 FileReader</p>';
		input.setAttribute("disabled","disabled");
	}else{
		input.addEventListener("change",readFile,false);
	}
	function readFile(){            
		for(var i=0;i<this.files.length;i++){
			var file = this.files[i];
			if(!/image\/\w+/.test(file.type)){
				alert("请确保文件为图像类型");
				return false;
			}
			var reader = new FileReader();
			reader.readAsDataURL(file);                    
			reader.onload = function(e){                        
				result.innerHTML+= '<img src="'+this.result+'" alt=""/>';                        
			}
		}
	}
</script>
</html>