html5 filereader 讀取圖片信息

時間 2019-11-10

標籤 html5 html filereader 讀取圖片信息欄目 HTML5 简体版

原文原文鏈接

<!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+'" alt=""/>'; 
	//img_area.innerHTML = '<div class="sitetip">圖片img標籤展現：</div><img src="'+this.result+'" alt=""/>'; 
} 
} 
</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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。