10,606
社区成员
发帖
与我相关
我的任务
分享FileReader读取并显示图像文件
代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文件拖放</title>
<script>
var file = null;
var drop = function(evt){
file = evt.dataTransfer.files[0];
}
// 读取用户的文件，并将文件显示出来
function FileReade(){
alert("监听到了这个事件了！");
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = function(e){
document.getElementById("showdiv").innerHTML = '<img src="'+e.result+'" alt=""/>'
}
reader.onerror=function(){alert("错误");}
}
function onLoad(){
if(typeof FileReader != 'undefined'){
document.getElementById("showdiv").addEventListener('drop',FileReade,false);
}else{
alert("你的浏览器未实现 FileReader 接口！");
}
}
</script>
</head>
<body onLoad="onLoad()">
<div id="showdiv" ondragenter="return false;"
ondragover="return false;"
ondrop="drop(event)"
style=" height:500px; width:300px; border:1px solid #ccc;"></div>
</body>
</html>
FileReade()事件能进入，就是reader的事件进入不了，不知道是怎么回事？
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文件拖放</title>
<script>
var file = null;
var drop = function(evt){
file = evt.dataTransfer.files[0];
}
// 读取用户的文件，并将文件显示出来
function FileReade(){
alert("监听到了这个事件了！");
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = function(e){
document.getElementById("showdiv").innerHTML = '<img src="'+e.result+'" alt=""/>'
}
reader.onerror=function(){alert("错误");}
}
function onLoad(){
if(typeof FileReader != 'undefined'){
document.getElementById("showdiv").addEventListener('drop',FileReade,false);
}else{
alert("你的浏览器未实现 FileReader 接口！");
}
}
</script>
</head>
<body onLoad="onLoad()">
<div id="showdiv" ondragenter="return false;"
ondragover="return false;"
ondrop="drop(event)"
style=" height:500px; width:300px; border:1px solid #ccc;"></div>
</body>
</html>
FileReade()事件能进入，就是reader的事件进入不了，不知道是怎么回事？
...全文
请发表友善的回复…
发表回复
