<!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>
点击或拖拽文件到此处
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 澜妈想问下魅宝们，是否有过这样的疑惑，为什么同样的饭，闰蜜吃了没反应，自己却在疯狂的长肉？为什么！为什么！！为什么...
- 当我们push时 searchbar 会闪烁出现（就延迟了出现）override func viewDidLoad...
