【项目问题】HTML5（范围选择以及文件上传的进度显示）

最新推荐文章于 2024-01-10 19:07:43 发布

原创最新推荐文章于 2024-01-10 19:07:43 发布 · 963 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #前端 #html #javascript

项目问题专栏收录该内容

27 篇文章

订阅专栏

本文介绍了如何通过HTML和JavaScript实现输入范围（range）的选择数据显示以及文件上传的进度条显示。通过监听input事件和FileReader的progress事件，实时更新数据显示，提升用户体验。

一、范围选择显示

在我们使用<input type="range"/>元素进度条的时候，无法直观地得知选中的范围数据，这就造成了较差的用户体验，所以我们需要将数据进行显示。

效果如下图：

代码如下：

<!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>范围选择数据可视化</title>
</head>

<body>
    <form action="" method="get">
        <label>范围选择：<input type="range" name="range" max="100" id="range" /><span name="rangevalue">0</span></label>
    </form>
    <script>
        var rangebtn = document.getElementById('range');
        var range = document.getElementsByName('range');
        var rangevalue = document.getElementsByName('rangevalue');

        rangebtn.addEventListener('change', () => {
            console.log(rangevalue)
            rangevalue[0].textContent = range[0].value
        })
    </script>
</body>

</html>

二、文件上传的进度显示

我们在使用<input type="file" />元素上传文件时，会出现无法得知上传进度的情况，给用户不好的体验，所以我们要添加进度条(progress)进行显示进度。

注：此进度条的步骤代表文件转码的进度，并非传到服务器的进度。

效果如下图：

代码如下：

<!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>文件上传的进度可视化</title>
</head>

<body>
    <form action="" method="post" id="uploadFile">
        <input type="file" name="file" id="file" multiple>
        <label>
            <progress id="progress" value="0" max="100"></progress><span name="progressvalue"></span></label>
    </form>
    <script>
        const reader = new FileReader();
        var uploadFile = document.getElementById('uploadFile');
        const progress = document.getElementById('progress');
        const progressvalue = document.getElementsByName('progressvalue');

        uploadFile.onchange = () => {
            const files = event.target.files;
            const file = files[0];
            reader.readAsDataURL(file);
            reader.addEventListener('progress', (event) => {
                if (event.loaded && event.total) {
                    const percent = (event.loaded / event.total) * 100;
                    progress.value = percent
                    progressvalue[0].textContent = percent.toFixed(0) + '%'
                }
            })
        }
    </script>
</body>

</html>