本实例是关于php文件上传时进度条的实现，主要采用ajax+html5

封面

主界面以及Ajax实现：index.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>upload</title>
</head>
<body>
    <div class="center" style="width:404px;margin:100px auto;">
        <div id="file" style="width: 404px;height: 150px;text-align: center;padding-top: 30px;margin: center;background-color: rgb(232, 221, 203);">
            <input type="file" name="ver" id="fileInput" />
            <button class="upload" onclick="uploadFile()">上传</button>
            <!-- 进度条 -->
            <div class="progress" style="position: relative;top: 30px;width: 300px;height: 25px;line-height: 25px;margin:auto;text-align: center;border: 2px solid rgb(3, 101, 100);">
                <span class="percent" style="position: relative; z-index:100;">上传进度：0%</span>
                <span class="probg" style="position: absolute;left: 0;top: 0;height: 25px;background-color: rgb(28, 170, 221);width: 0px;"></span>
            </div>
        </div>

        <div class="feedback" style="width: 396px;height: 30px;line-height: 30px;padding:4px;margin-top:20px;background-color: thistle;">服务端回信：</div>
    </div>

    <script>
        let fileInput = document.getElementById("fileInput");
        let uploadbtn = document.querySelector(".upload");
        let progress = document.querySelector(".progress");
        let probg = document.querySelector(".probg");
        let percentInfo = document.querySelector(".percent");
        let feedback = document.querySelector(".feedback");


        // 文件上传进度
        let percent = 0;

        function progressFunction(e) {
            if (e.lengthComputable) {
                // 获取百分制的进度
                percent = Math.round(e.loaded / e.total * 100);
                // 长度根据进度条的总长度等比例扩大
                probg.style.width = progress.clientWidth / 100 * percent + "px";
                // 进度数值按百分制来
                percentInfo.innerHTML = "上传进度：" + percent + "%";
            }
        }

        // 上传成功
        function success(e) {
            console.log("成功" + e.currentTarget.responseText);
            feedback.innerHTML = "服务端回信：" + e.currentTarget.responseText;
        }

        // 上传失败
        function fail(e) {
            console.log("服务端回信：" + e);
        }

        // 文件上传
        function uploadFile() {
            let file = fileInput.files[0];

            if (!file) {
                alert("请选择文件！");
                return;
            }

            // 用FormData传输
            let fd = new FormData();
            fd.append("file", file);

            // 文件上传并获取进度
            let xhr = new XMLHttpRequest();
            xhr.open("post", "upload.php", true);

            xhr.upload.onprogress = progressFunction;
            xhr.onload = success;
            xhr.onerror = fail;

            xhr.send(fd);
        }
    </script>
</body>
</html>

php处理上传文件：upload.php

<?php  
if(isset($_FILES["file"])){  
    move_uploaded_file($_FILES["file"]["tmp_name"],"upload/".$_FILES["file"]["name"]);
    echo "http://www.ilingku.com/upload/".$_FILES["file"]["name"];
}else{
    echo 'no file';
}
?>
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。