点击或拖拽文件到此处

<!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>
点击或拖拽文件到此处

推荐阅读更多精彩内容
