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>

相關標籤/搜索