点击按钮文件上传

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style>
            #progress{
                height:10px;
                width:500px;
                border: 1px solid gold;
                position: relative;
                border-radius: 5px;
            }
            #progress .progress-item{
                height:100%;
                position: absolute;
                left:0;
                top:0;
                background: chartreuse;
                border-radius: 5px;
                transition: width .3s linear;
            }
        </style>
    <body>
        文件上传框<br>
        <input type="file" id="file"><br>
        显示进度条<br>
        <div id="progress">
            <div class="progress-item"></div>
        </div>
        上传成功后的返回内容<br>
        <span id="callback"></span>
    </body>
    <script>
        //首先监听input框的变动，选中一个新的文件会触发change事件
        document.querySelector("#file").addEventListener("change",function () {
            //获取到选中的文件
            var file = document.querySelector("#file").files[0];
            //创建formdata对象
            var formdata = new FormData();
            formdata.append("file",file);
            //创建xhr，使用ajax进行文件上传
            var xhr = new XMLHttpRequest();
            //这里是对应的网址上传
            xhr.open("post","/");
            //回调
            xhr.onreadystatechange = function () {
                if (xhr.readyState==4 && xhr.status==200){
                    document.querySelector("#callback").innerText = xhr.responseText;
                }
            }
            //获取上传的进度事件通过event.loaded和event.total获取比例
            xhr.upload.onprogress = function (event) {
                if(event.lengthComputable){
                    console.log(event,event.loaded,event.total)
                    var percent = event.loaded/event.total *100;
                    // var percent = 50;
                    //展示的进度条进度
                    document.querySelector("#progress .progress-item").style.width = percent+"%";
                }
            }
            //将formdata上传
            xhr.send(formdata);
        });
    </script>
</html>
点击按钮文件上传

猜你喜欢
