major-event-project
/
文件域.html

<!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>
</head>

<body>
    <form action="">
        <input type="file" />
        <img src="" alt="" />
    </form>
    <script>
        document.querySelector("input").onchange = function() {
            if (this.files.length > 0) {
                let fileObj = this.files[0];
                let fd = new FormData();
                fd.append("avatar", fileObj);
                fd.append("age", 20);
                let xhr = new XMLHttpRequest();
                xhr.onload = function() {};
                xhr.open("POST", "http://www.itcbc.com:3006/api/fprmdata");
                xhr.send(fd);

                let url = URL.createObjectURL(fileObj);
                console.log(url);
                document.querySelector("img").src = url;
            }
        };
    </script>
</body>

</html>