点击或拖拽文件到此处
2017-07-17 本文已影响14人
哼_
<!DOCTYPE html>
<html>
<head>
<title>点击或拖拽文件到此处</title>
<meta charset="utf-8">
<style type="text/css">
.box{
height: 80px;
width: 400px;
border:1px solid ;
margin: 0 auto;
border-radius: 5px;
box-shadow: 0 -2px 2px #000;
font-size: 40px;
text-align: center;
}
</style>
</head>
<body>
<div class="box">点击或拖拽文件到此处</div>
<input type="file" id="myFile" style="display: none;" name="" multiple>
</body>
<script type="text/javascript">
var box = document.querySelector(".box");
var input = document.querySelector("#myFile");
//点击事件 激活input
box.onclick = function(){
input.click(); //点击box,触发的是input的点击事件
}
input.onchange = function(){
var files = this.files;
getFile(files);//在input的onchange事件中,得到这个选中的文件
}
box.ondragover = function(e){
e.preventDefault(); //阻止浏览器的默认事件 ondrop才能被触发
}
box.ondrop = function(e){
//ondrop代表在目标元素上放手的事件
e.preventDefault();
var files = e.dataTransfer.files;
getFile(files);//两种触发方式 老师说
}
function getFile(files){
if(files.length>0){
for(var i=0;i<files.length;i++){
var file = files[i];
console.log(file.type); //测试选中文件类型
//判断如果传入的是img类型
if(file.type.indexOf("image/")!=-1){
var fr = new FileReader();
fr.readAsDataURL(file);
fr.onload = function(){
var img = new Image();
img.src = this.result;
document.body.appendChild(img);
}
}
//判断如果是text/html类型的话 这个写的不正确,输出的格式不正确 是base64 格式的
//应该通过某种方式改成html格式,还没学,学了过来改一下
if(file.type.indexOf("text/")!=-1){
var fr = new FileReader();
fr.readAsDataURL(file);
fr.onload = function(){
var Odiv = document.createElement("div")
Odiv.innerHTML = this.result;
document.body.appendChild(Odiv);
}
}
}
}
}
</script>
</html>
