将桌面文件拖放至浏览器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>将桌面文件拖放到浏览器</title>
<style>
div{
margin-top: 10px;
font-family:"楷体";
padding: 5px;
}
#container{
border: 2px solid green;
width: 400px;
height: 500px;
margin-top: 100px;
margin-left: 30px;
}
</style>
<script>
var container=null;
var prog=null;
var info=null;
var content=null;
//我们的按钮
var but=null;
//FileReader对象
var reader=null;
window.addEventListener("load",function(){
container=document.getElementByIdx_x("container");
prog=document.getElementByIdx_x("prog");
info=document.getElementByIdx_x("info");
content=document.getElementByIdx_x("content");
but=document.getElementByIdx_x("but");
//为我们的整个div添加拖动事件
container.addEventListener("dropover",function(evt){
evt.preventDefault();
},false );
//添加拖动事件
container.addEventListener("drop",function(evt){
evt.preventDefault();
file_drop(evt);
},false);
function file_drop(evt){
//清空显示区域
prog.innerHTML="";
info.innerHTML="";
content.innerHTML="";
//拖入文件的File接口对象
var file=evt.dataTransfer.files[0];
//如果没有拖入，或者失败
if(!file){
info.innerHTML="<p>请拖入文件</p>";
return;
}
//FileReader接口对象
reader=new FileReader();
//文件导入进度的显示
reader.onprogress=function(evt){
//可计算的已上传字节数并且文件的大小大于0
if(evt.lengthComputable==true&&evt.total>0){
var rate=(evt.loaded*100/evt.total).toFixed(1);
var msg="";
msg+="文件大小"+evt.total/1024+"k <br>"+"上传数量"+evt.loaded/1024+"k <br>"+"上传进度"+rate;
prog.innerHTML=msg;
}
};
//显示属性
var msg="";
msg+="文件大小:"+(file.size/1024).toFixed(1)+"k"+"<br>";
msg+="文件名:"+file.name+"<br>";
msg+="文件类型"+file.type+"<br>";
info.innerHTML=msg;
//如果拖入的文件是图像文件^image表示以image开头的
if(/^image/.test(file.type)){
reader.readAsDataURL(file);
reader.onload=function(evt){
var el=document_createElement_x("object");
el.setAttribute("type",file.type);
el.setAttribute("data",reader.result);
content.a(el);
};
}
//如果拖入的是视频文件
else if(/^video/.test(file.type)){
var el=document_createElement_x("video");
//判断视频能否被播放
if(!/^(maybe)|probable/.test(el.canPlayType(file.type))){
return;
}
reader.readAsDataURL(file);
reader.onload=function(evt){
el.setAttribute("type",file.type);
el.setAttribute("width","400");
el.setAttribute("height","400");
el.setAttribute("src",reader.result);
el.setAttribute("controls",true);
content.a(el);
}
}
//如果拖入的是文本文件
else if(/^text/.test(file.type)){
reader.readAsText(file);
reader.onload=function(evt){
content.a(document_createTextNode(reader.result));
}
}
//除了以上情况下，以十六进制显示文件开头的40字节
else{
reader.readAsBinaryString(file);
reader.onload=function(evt){
var str="";
for(var i=0;i<80;i++){
//将二进制的数转换为16进制
var hex=reader.result.charCodeAt(i).toString(16);
if(hex.length<2){
hex="0"+hex;
}
str+=hex;
if((i+1)==0){
str+="\n";
}
else{
str+=" ";
}
}
content.a(document_createTextNode(str));
};
}
}
function abort(){
if(reader==null){
return;
}
}
},false);
</script>
</head>
<body>
<div id="container">
<h3>将桌面文件拖入到浏览器</h3>
<div id="prog">请将桌面文件拖入到此处</div>
<div><Button id="but" onclick="abort()">终止读取</Button></div>
<div id="info"></div>
<div id="content"></div>
</div>
</body>
</html>