发新话题
打印

[开发] 纯JS实现ajax文件上传并显示上传进度

纯JS实现ajax文件上传并显示上传进度

代码:
<input type="file" onchange="uploadFile()">
<script type="text/javascript">
    function uploadFile(event) {
        let e = window.event || event;
        let oFile = e.target.files[0];

        let oData = new FormData();
        oData.append("ktseefile", oFile);//上传文件

        let xhr = new XMLHttpRequest();
        xhr.timeout = 10000;//超时时间10秒
        xhr.open("post", "api/upload.php", true); //建立异步上传连接
        xhr.onload = function (e) { //请求完成
            //如果请求成功
            if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
                console.log(JSON.parse(e.target.responseText));
            }
        };
        xhr.onerror = function (e) { //请求失败
            console.log(e);
        };
        xhr.upload.onprogress = function (e) { //上传进度
            console.log(Math.round(e.loaded / e.total * 100) + '%');
        };
        xhr.send(oData);
    }
</script>
PHP后端可以使用这个类 http://www.verot.net/php_class_upload.htm

TOP

发新话题