H5拖拽上传进度条-CFANZ编程社区

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>H5拖拽上传进度条</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #div1 {
            width: 200px;
            height: 200px;
            background: black;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -100px 0 0 -100px;
            color: #e4393c;
            line-height: 200px;
            text-align: center;
        }

        #div1:after {
            content: '请拖入文件到此处'
        }

        #content {
            width: 90%;
            margin: 0 auto;
            margin-top: 200px;
            text-align: center;
            display: none;

        }

        #div2 {
            position: absolute;
            bottom: 0;
            height: 60px;
            background: -webkit-linear-gradient(left, red, green);
            width: 0%;
        }
    </style>
</head>

<body>
    <div id='div1'></div>
    <div id='content'>
        <span>文件:<span id='textName'></span></span>
        <br>
        <span>大小:<span id='textSize'></span></span>
    </div>
    <div id='div2'></div>
    <script type="text/javascript">
        div1.ondragenter = function () {
            document.body.style.background = 'yellow';
        };
        div1.ondragleave = function () {
            document.body.style.background = 'white';
        };

        var a = 0;
        div1.ondragover = function () {
            // a++;
            // document.title = a;
            // return false;
        };
        
        div1.ondrop = function (e) {
            var oFile = e.dataTransfer.files[0];
            var reader = new FileReader();
            // 读取指定的 File 对象
            reader.readAsBinaryString(oFile);
            reader.onprogress = function (e) {
                // 展示进度条
                div2.style.width = parseInt(e.loaded / e.total * 100) + '%';
                if (e.loaded == e.total) {
                    content.style.display="block";
                    // 读取的文件名
                    textName.innerHTML = oFile.name;
                    // 读取的文件大小
                    textSize.innerHTML = oFile.size; 
                }
            };
            return false;
        };
    </script>
</body>

</html>