js实现简单的不上传预览功能-优快云博客

本文介绍了一个简单实用的图片上传预览功能实现方法，该方法兼容Chrome和IE浏览器。通过HTML与JavaScript结合的方式，实现了对用户上传图片的即时预览，并区分了不同浏览器的处理方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是一个简单的实现上传图片的预览功能，兼容chrome和IE，前几天做项目的时候有用到，在这里做个记录。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>
 <BODY>
	<p> 
	   <label>请选择一个图像文件：</label> 
	   <input type="file" id="image_file" value="ddd" /> 
	</p>  
	<div id="result"></div> 
<script>
	var result = document.getElementById("result"); 
	var input = document.getElementById("image_file"); 
	 
	if(typeof FileReader==='undefined'){ 
		input.attachEvent("onchange",loadImgForIE);
	}else{ 
		input.addEventListener('change',readFile,false); 
	} 

	function readFile(){ 
		var file = this.files[0]; 
		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=""/>' 
		} 
	} 

	function loadImgForIE(){
		var imagePath=input.value;
		result.innerHTML = '<img src="'+imagePath+'" alt=""/>' 
	}
</script>
</BODY>
</HTML>