这是一个简单的实现上传图片的预览功能,兼容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>