ajax 上传文件或视频,显示进度条

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_37011771/article/details/80574788
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .progress{
        width: 300px;
        height: 25px;
        border: 1px red solid;
        border-radius: 5px;
        overflow: hidden;
        position: relative;
    }
    .step{
        width:0px;
        height: 100%;
        background-color: skyblue;
    }
    span {
        position:absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    </style>
</head>
<body>
<form action="">
    <input type="text"name="userName">
    <br>
    <br>
    <input type="text" name="userPass">
    <br>
    <input type="file" name="file">
    <div class="progress">
        <span>0%</span>
        <div class="step"></div>
    </div>
</form>
    <br>
    <input type="button" value="ajax" class="ajax">
</body>
</html>
<script>
document.querySelector(".ajax").οnclick=function(){
    //console.log(111);
    var ajax= new XMLHttpRequest();
    ajax.open('post','./02.text.php');
    //ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    ajax.οnlοad=function(){
        console.log(ajax.responseText);
        
    }
    //发送数据
    var sendData = new FormData(document.querySelector('form'));

    sendData.append('skill','敲代码');
    sendData.append('skillTwo','撸代码');
    //获取文件上传进度
    ajax.upload.οnprοgress=function(event) {
        //console.log(event);
        //修改进度条
        var percent=event.loaded/event.total*100+'%';

        document.querySelector('.step').style.width=percent;
        //将进度条上的数据百分比动态显示
        document.querySelector('span').innerHTML=Math.floor(event.loaded/event.total*100)+'%';
    }
    ajax.send(sendData);
}

</script>

后台代码

<?php 
//发什么返回什么
var_dump($_REQUEST);
?>

展开阅读全文

没有更多推荐了,返回首页