JavaScrip读取当地文件 _Web前端

JavaScrip读取本地文件
<!DOCTYPE html> 
<meta charset="utf-8">
<title>JavaScript Read File</title> 

<style type="text/css"> 
*
{ 
	padding:0; 
	margin:0; 
}


#fileContent
{
	width:500px;
	height:300px;
	border:solid 1px blue;
}

section
{
	display:inline-block;
}

#file-list,#file-img,#file-xml
{
	display:inline-block;
	width:500px;
	height:300px;
	border:solid 1px red;
}
</style> 
<script type="text/javascript"> 
	
	function readLocalFile () {
		//alert("start...");
		var localFile = document.getElementById("uploadFile").files[0];
		//alert(uploadFile);
		//alert(localFile.name);
		//alert(localFile.type);
		//alert(localFile.size);
		var reader = new FileReader();
		//Uncaught SyntaxError:Unexpected identifier
		var content;
		reader.onload = function(event) {
			content = event.target.result;
			//alert(content);
			document.getElementById("fileContent").value = content;
		}
		reader.onerror = function(event) {
			alert("File could not be read! Code " + event.target.error.code);
		}
		reader.readAsText(localFile,"GB2312");
		
		//content = reader.readAsText(uploaFile,"UTF-8");
		//
	}

	
</script> 
</head> 
<body> 
	
	<section>
		<input type="file" id="uploadFile"/>
		<input type="button" value="readFile" onclick="readLocalFile();"/>
		<br/>
		<textarea id="fileContent" ></textarea>
	</section>
	
	<section id="file-list" >
		
	</section>
	<section id="file-img">
		
	</section>
	
	<section id="file-xml">
		
	</section>
	<script>
	
	//文本显示，拖拽文本文件至该区域内即可
	var target = document.getElementById("file-list");

	target.addEventListener("dragover", function(event) {
		event.preventDefault();
	}, false);

	target.addEventListener("drop", function(event) {

		// cancel default actions
		///Uncaught TypeError:Cannot call method 'addEventListnener' of null
		event.preventDefault();

		var i = 0,
		files = event.dataTransfer.files,
		len = files.length;

		var reader = new FileReader();
		for (; i < len; i++) {
			//document.getElementById("file-list").innerText=document.getElementById("file-list").innerText + "fileName:" + files[i].name 
			//+ "   Type:" + files[i].type + "   Size:" + files[i].size + "bytes"
			//console.log("Filename: " + files[i].name);
			//console.log("Type: " + files[i].type);
			//console.log("Size: " + files[i].size + " bytes");
			reader.onload = function (event) {
				document.getElementById("file-list").innerText = event.target.result;
			}
			reader.onerror = function (event) {
				alert("error");
			}
			reader.readAsText(files[i],"GB2312");
		}
	}, false);
	

	
	
	//图片显示，拖拽图片至该区域内即可
	var targetImg = document.getElementById("file-img");
	targetImg.addEventListener("dragover",function (event) {
		event.preventDefault();
	},false);
	
	targetImg.addEventListener("drop",function (event) {
		event.preventDefault();
		
		var file = event.dataTransfer.files[0];
		//alert(file.name);
		var readerImg = new FileReader();
		readerImg.onload = function (event) {
			var imgUrl = event.target.result;
			var img = document.createElement("img");
			img.src = imgUrl;
			document.getElementById("file-img").appendChild(img);
			img.style.width="400px";
			img.style.height="300px";
		}
		
		readerImg.onerror = function (event) {
			alert("errorImg");
		}
		
		readerImg.readAsDataURL(file);
		
	},false);
	
	
	//xml文件读取，拖拽文件至该区域内即可
	var targetXml = document.getElementById("file-xml");
	targetXml.addListener("dragover",function (event) {
		event.preventDefault();
	},false);
	
	targetXml.addListener("drop",function (event) {
		
	},false);
	
	</script>
</body> 
</html>
1 楼 huangyunbin 2012-09-18
你的FileReader的定义呢，我怎么没看到啊