html5 filereader 读取图片信息

浏览数：42 / 时间：2015年06月09日

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>简单的html5 File测试 for pic2base64</title> 

<script> 
window.onload = function(){ 
var input = document.getElementById("demo_input"); 
var result= document.getElementById("result"); 
var img_area = document.getElementById("img_area"); 
if ( typeof(FileReader) === ‘undefined‘ ){ 
	result.innerHTML = "抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！"; 
	input.setAttribute( ‘disabled‘,‘disabled‘ ); 
} else { 
	input.addEventListener( ‘change‘,readFile,false );} 
} 
function readFile(){ 
	var file = this.files[0]; 
	console.log(file);
	//这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件 
	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+‘" />‘; 
	//img_area.innerHTML = ‘<div class="sitetip">图片img标签展示：</div><img src="‘+this.result+‘" />‘; 
} 
} 
</script> 
</head> 
<body> 
<input type="file" value="sdgsdg" id="demo_input" /> 
<textarea id="result" rows=30 cols=300></textarea> 
<p id="img_area"></p> 
</body> 
</html>

html5 filereader 读取图片信息,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。