原生html和js实现文件上传

最新推荐文章于 2024-05-24 16:46:26 发布

WiFiMing

最新推荐文章于 2024-05-24 16:46:26 发布

阅读量682

点赞数

分类专栏：原生前端文章标签： javascript html 开发语言

本文链接：https://blog.csdn.net/weixin_42332166/article/details/133495433

版权

原生前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏


<!DOCTYPE html>
<html>
<head>
    <title>文件上传示例</title>
</head>
<body>
    <h1>文件上传示例</h1>
    
    <!-- 创建一个文件选择输入框 -->
    <input type="file" id="fileInput" onchange="checkFileExtension()">
    <!-- 创建一个上传按钮，点击它触发上传操作 -->
    <button onclick="uploadFile()">上传文件</button>
    <!-- 创建一个进度条，用于显示上传进度 -->
    <progress id="progressBar" value="0" max="100"></progress>
    <!-- 创建一个状态文本，用于显示上传状态 -->
    <p id="status">等待上传</p>

    <script>
        // 检查文件后缀名是否在允许的列表中
        function checkFileExtension() {
            const fileInput = document.getElementById('fileInput');
            const status = document.getElementById('status');
            
            // 获取用户选择的文件
            const file = fileInput.files[0];
            if (file) {
                // 获取文件名
                const fileName = file.name;
                // 获取文件后缀名
                const fileExtension = fileName.split('.').pop().toLowerCase();

                // 检查文件后缀名是否在允许的列表中
                if (!['png', 'jpg', 'pdf'].includes(fileExtension)) {
                    status.innerText = '只允许上传 .png, .jpg 或 .pdf 文件';
                    fileInput.value = ''; // 清空文件输入框
                } else {
                    status.innerText = '文件符合要求';
                }
            }
        }

        // 当点击上传按钮时，执行上传文件的函数
        function uploadFile() {
            const fileInput = document.getElementById('fileInput');
            const progressBar = document.getElementById('progressBar');
            const status = document.getElementById('status');
            
            // 获取用户选择的文件
            const file = fileInput.files[0];
            if (file) {
                // 创建一个FormData对象，用于将文件数据发送到服务器
                const formData = new FormData();
                formData.append('file', file); // 将文件添加到FormData中

                // 创建一个XMLHttpRequest对象，用于发送HTTP请求
                const xhr = new XMLHttpRequest();

                // 配置请求，指定上传的URL和请求方法
                xhr.open('POST', 'your_upload_endpoint_url_here', true);

                // 监听上传进度事件，更新进度条和状态文本
                xhr.upload.onprogress = function (e) {
                    if (e.lengthComputable) {
                        const percent = (e.loaded / e.total) * 100;
                        progressBar.value = percent;
                        status.innerText = `上传中: ${percent.toFixed(2)}%`;
                    }
                };

                // 监听上传完成事件
                xhr.onload = function () {
                    if (xhr.status === 200) {
                        status.innerText = '上传完成';
                    } else {
                        status.innerText = '上传失败';
                    }
                };

                // 监听上传错误事件
                xhr.onerror = function () {
                    status.innerText = '上传错误';
                };

                // 发送FormData对象到服务器
                xhr.send(formData);
            } else {
                status.innerText = '请选择文件';
            }
        }
    </script>
</body>
</html>

WiFiMing

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
原生html和js实现文件上传

创建一个FormData对象，用于将文件数据发送到服务器。// 监听上传进度事件，更新进度条和状态文本。// 当点击上传按钮时，执行上传文件的函数。// 配置请求，指定上传的URL和请求方法。// 检查文件后缀名是否在允许的列表中。// 检查文件后缀名是否在允许的列表中。// 发送FormData对象到服务器。// 将文件添加到FormData中。// 获取用户选择的文件。// 获取用户选择的文件。// 监听上传完成事件。// 监听上传错误事件。// 获取文件后缀名。// 清空文件输入框。
复制链接

扫一扫