master

分支 (1)

管理

管理

master

ajax
/
jq文件上传更改.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>
    <input type="file">
    <script src="./js/jquery-1.12.4.js"></script>
    <script>
        let input = document.querySelector("input")
        input.onchange = function () {
            let file = this.files[0];
            let fd = new FormData();
            fd.append("file_data", file);
            $.ajax({
                url: "http://127.0.0.1:3001/uploadFile",
                type: "post",
                data: fd,
                // 让jq不要使用 URLSearchParams来处理 fd参数，文件上传
                processData: false,
                contentType: false,
                // 文件上传进度
                xhr() {
                    let tempXhr = new XMLHttpRequest()
                    tempXhr.upload.onprogress = function (event) {
                        let { loaded, total } = event
                        let ser = parseInt((loaded / total) * 100) + '%'
                        console.log(ser)
                    }
                    return tempXhr
                },
                success(arr) {
                    console.log(arr)
                }
            })
        }
    </script>
</body>

</html>