H5原生input上传文件功能

匆叔

已于 2024-07-12 09:13:08 修改

阅读量100

点赞数 1

文章标签： javascript 前端开发语言

于 2024-07-12 09:12:08 首次发布

本文链接：https://blog.csdn.net/m0_73854403/article/details/140369449

版权

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        #app {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            height: 100%;
            width: 100%;
            padding-top: 20px;
        }

        #fileInput {
            display: block;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="upload">
            <input type="file" id="fileInput" multiple>
            <button onclick="uploadFiles()">上传文件</button>
        </div>
    </div>
    <script>
        let httpUrl = 'http://192.168.1.29:19200/'
        // let httpUrl = 'https://main.yungia.cn/'

        function uploadFiles() {
            const input = document.getElementById('fileInput');
            const files = input.files;

            if (files.length === 0) {
                alert('请选择至少一个文件！');
                return false;
            }

            // 创建FormData对象
            let formData = new FormData();
            for (let i = 0; i < files.length; i++) {
                formData.append('file', files[i], files[i].name);
            }

            // 发送请求到服务器
            fetch(`${httpUrl}api/******`, {
                method: 'POST',
                body: formData,
                data: formData,

            })
                .then(response => response.json())
                .then(data => {
                    if (data.code === 200) {
                        alert(data.msg)
                        console.log('Success:', data)
                    } else {
                        alert(data.msg)
                    }
                })
                .catch((error) => {
                    alert('请联系网站管理员检查异常')
                });
        }
    </script>
</body>


</html>