监听文件读取进度，中断文件读取

最新推荐文章于 2024-08-14 18:50:50 发布

热爱°可抵岁月漫长

最新推荐文章于 2024-08-14 18:50:50 发布

阅读量226

点赞数

文章标签： html javascript css

本文链接：https://blog.csdn.net/weixin_46337813/article/details/130280341

版权

该代码示例展示了如何利用HTML、CSS和JavaScript来创建一个文件读取进度条。当用户选择文件后，FileReaderAPI用于读取文件内容，并在读取过程中更新进度条。同时，它还包含了中断读取的功能以及对各种错误的处理机制。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #progress {
            width: 500px;
            background: #eee;
            height: 30px;
            text-align: center;
            margin-top: 20px;
            line-height: 30px;
            opacity: 0;
            transition: all .3s;
        }

        #progress.loading {
            opacity: 1;
        }

        #progress #percent {
            height: 100%;
            width: 0%;
            background: skyblue;
        }
    </style>
</head>

<body>
    <input type="file" id="inputFile">
    <div id="progress">
        <div id="percent">0%</div>
    </div>
    <button id="abort">中断读取</button>
    <script>
        var input = document.getElementById('inputFile'),
            oProgress = document.getElementById('progress'),
            oPercent = document.getElementById('percent'),
            oAbort = document.getElementById('abort');
        var reader;
        // 监听选择文件
        input.addEventListener('change', handelFilesSelect, false)
        oAbort.addEventListener('click', abort, false)

        function handelFilesSelect(e) {
            // dom初始化
            oPercent.style.width = 0 + '%'
            oPercent.textContent = 0 + '%'
            oProgress.className = ''

            // 创建读取对象
            reader = new FileReader()

            // 开始读取监听
            reader.onloadstart = function () {
                oProgress.className = 'loading'
            }
            // 读取进度事件
            reader.onprogress = updateProgress;

            // 读取完成事件
            reader.onload = function () {
                // 解决选择重复文件的不触发change事件的问题
                e.target.value = '';
                oPercent.style.width = 100 + '%'
                oPercent.textContent = 100 + '%'
            }

            // 读取错误事件
            reader.error = errorHandler;
            reader.onabort=function(){
                alert('文件读取已取消')
            }

            // 开始读取
            reader.readAsBinaryString(e.target.files[0])
        }



        // 进度处理
        function updateProgress(e) {
            console.log(e);
            if (e.lengthComputable) {
                var percentLoaded = Math.round((e.loaded / e.total) * 100) //取整
                console.log(percentLoaded);

                if (percentLoaded <= 100) {
                    oPercent.style.width = percentLoaded + '%'
                    oPercent.textContent = percentLoaded + '%'
                }
            }
        }

        // 中止处理
        function abort() {
            reader.abort()
        }

        // 错误处理
        function errorHandler(e) {
            console.log('错误处理e',e);
            var err = e.target.error
            switch (err.code) {
                case err.NOT_FOUND_ERR:
                    alert('文件未找到')
                    break;
                case err.NOT_READABLE_ERR:
                    alert('文件不可读取')
                    break;
                case err.ABORT_ERR:
                    alert('文件读取终止')
                    break;
                default:
                    alert('在读取过程中发生错误')
                    break;
            }
        }
    </script>
</body>

</html>