Assettest.html 5.66 KB
Newer Older
Ford committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Upload Folder Example</title>


</head>
<body>
<!--<form action="/digitalpersons/edit" method="post" enctype="multipart/form-data" onsubmit="event.preventDefault();uploadData();">
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name"><br><br>

    <label for="gender">性别:</label>
    <select id="gender" name="gender">
        <option value="male">男</option>
        <option value="female">女</option>
        <option value="other">其他</option>
    </select><br><br>

    <label for="personality">个性:</label>
    <input type="text" id="personality" name="personality"><br><br>

    <label for="catchphrases">口头禅:</label>
    <input type="text" id="catchphrases" name="catchphrases"><br><br>

    <label for="backgroundInfo">背景信息:</label>
    <textarea id="backgroundInfo" name="backgroundInfo"></textarea><br><br>

    <label for="visibility">可见性:</label>
    <select id="visibility" name="visibility">
        <option value="public">公开</option>
        <option value="private">私有</option>
    </select><br><br>

    <label for="id">编号:</label>
    <input type="text" id="id" name="id"><br><br>

    <label for="avatar">头像:</label>
    <input type="file" id="avatar" name="avatar" multiple><br><br>

    <label for="poster">海报:</label>
    <input type="file" id="poster" name="poster"><br><br>

    <label for="model_driver_type">模型驱动类型:</label>
    <input type="text" id="model_driver_type" name="model_driver_type"><br><br>

    <label for="voice_type">语音类型:</label>
    <input type="text" id="voice_type" name="voice_type"><br><br>
    <input type="file" id="folderInput" webkitdirectory mozdirectory directory multiple style="display: none;">
    <button type="button" onclick="document.getElementById('folderInput').click()">Upload Folder</button>
    <input type="submit" value="提交">
</form>-->
<!--
<form id="loginForm">
    <label for="username">用户名:</label>
    <input type="text" id="username" name="username"><br><br>

    <label for="password">密码:</label>
    <input type="password" id="password" name="password"><br><br>

    <button type="button" onclick="login()">提交</button>
</form>
-->

<form id="uploadForm" enctype="multipart/form-data">
    <input type="file" id="avatar" name="avatar"><br><br>
    <input type="file" id="poster" name="poster"><br><br>
    <input type="file" id="folderInput" webkitdirectory mozdirectory directory multiple>
    <button onclick="uploadFolder()">Upload</button>
</form>


</body>
<script>
    function login() {
        // 创建一个包含用户名和密码的对象
        // let form = document.getElementById('loginForm');
        // let username = form.elements.username.value;
        // let password = form.elements.password.value;
        let data = {
            username: "admin",
            password: "admin"
        };

        fetch('http://localhost:8089/login', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        })
            .then(response => response.json())
            .then(data => {
                // 请求成功的处理
                console.log('登录成功');
                console.log(data);
            })
            .catch(error => {
                // 请求失败的处理
                console.error('登录失败');
                console.error(error);
            });
    }
    console.log("========== login(); ==========")
    login();

    function uploadFolder() {
        let input = document.getElementById('folderInput');
        // 确保用户选择了一个文件夹
        if (!input.files || !input.files.length) {
            return alert('Please select a folder to upload.');
        }

        let files = input.files;
        let formData = new FormData();
        // 使用append()方法动态添加数据
        formData.append('name', '马斯克');
        formData.append('gender', 'male');
        formData.append('personality', '科技大佬');
        formData.append('catchphrases', '口头禅');
        formData.append('backgroundInfo', '背景信息');
        formData.append('visibility', 'public');
        formData.append('id', '4');
        formData.append('model_driver_type', '3d');
        formData.append('voice_type', '东北辽宁少女口音');
        console.log(id)
        // 添加文件
        let avatarInput = document.getElementById('avatar');
        if(avatarInput.files[0]) {
            formData.append('avatar', avatarInput.files[0]);
        }

        let posterInput = document.getElementById('poster');
        if(posterInput.files[0]) {
            formData.append('poster', posterInput.files[0]);
        }


        // 将文件的相对路径和文件对象添加到FormData中
        for (let i = 0; i < files.length; i++) {
            formData.append('model_folder', files[i], files[i].webkitRelativePath);
        }

        // 创建一个 XMLHttpRequest 对象进行异步请求
        let request = new XMLHttpRequest();
        request.open('POST', 'http://localhost:8089/digitalpersons/edit', true);

        request.onload = function() {
            if (request.status === 200) {
                // 文件上传成功的处理
                console.log(request.responseText);
            } else {
                // 文件上传失败的处理
                console.error(request.responseText);
            }
        };

        // 发送FormData对象到服务器
        request.send(formData);
    }
</script>
</html>