html5文件拖拽上传

时间 2019-12-05
标签 html5 html 文件上传栏目 HTML5 繁體版
原文原文链接
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style media="screen">
            #box{
                width: 200px;height: 200px;border: 1px dashed red;

            }
        </style>
    </head>
    <body>
        <div id="box">
            请拖一个文件过来，我给你上传
        </div>

    </body>
    <script type="text/javascript">
        var box = document.getElementById('box');
        box.ondragenter = function(e){
            e.preventDefault(); //阻止浏览器默认拖拽事件
            box.innerHTML = '轻松开';
        }
        box.ondragover = function(e){
            box.innerHTML = '轻松开';
            e.preventDefault(); //阻止浏览器默认拖拽事件
        }

        box.ondragleave = function(e){
            box.innerHTML = '你快回来';
            e.preventDefault(); //阻止浏览器默认拖拽事件
        }

        box.ondrop = function(e){
            var file = e.dataTransfer.files[0];

            var formData = new FormData();

            formData.append('pic',file);

            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function(){
                if(this.readyState == 4){
                    alert(this.responseText);
                }
            }
            xhr.open('post','03-3.php',true);
            xhr.send(formData);
            e.preventDefault(); //阻止浏览器默认拖拽事件
        }

    </script>
</html>