频道导航

【Ajax】ajax上传文件及进度条的实现

2020-06-10 Ajax 前端之家

前端之家收集整理的这篇文章主要介绍了【Ajax】ajax上传文件及进度条的实现，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

html5上传是同步上传的方式，所以能够实现进度条的显示。

首先我们用ajax来取得<input type="file" id="file_upload">的file对象：

    var file = null;
    var input = $("#file_upload");
    //文件域选择文件时,执行readFile函数
    input.addEventListener('change',readFile,false);
    function readFile(){ 
        file = this.files[0]; 
    }

然后用FormData()送到后台。

@H_404_18@

var fd = new FormData();
fd.append("file",file);

@H_404_18@

2.监听事件：给XMLHttpRequest添加上传中的监听事件，可以得到已上传的文件大小，用以实现进度条的显示。

 //监听事件
xhr.upload.addEventListener("progress",uploadProgress,false);

完整代码如下：

<html>
<head>
<Meta charset="utf-8">
<title>进度条测试</title>
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
</head>
<body>

    <input type="file" id="file_upload"/>
    <input type="button" value="上传" id="upload"/>
    <div style="background:#848484;width:100px;height:10px;margin-top:5px">
        <div id="progressNumber" style="background:#428bca;width:0px;height:10px" >
        </div>    
    </div>
    <font id="percent">0%</font>
</body>
<script>
var file = null;
$(function(){
    $("#upload").click(function(){
        upload();
    });
});
var input = document.getElementById("file_upload");

//文件域选择文件时,执行readFile函数
input.addEventListener('change',false);

function readFile(){ 
    file = this.files[0]; 
}
//上传文件
function upload(){
        var xhr = new XMLHttpRequest();

        var fd = new FormData();

        fd.append("fileName",file);

        //监听事件
        xhr.upload.addEventListener("progress",false);

        //发送文件和表单自定义参数
        xhr.open("POST","../UploadServlet",true);

        xhr.send(fd);
    }

    function uploadProgress(evt){
        if (evt.lengthComputable) {                  
            //evt.loaded：文件上传的大小   evt.total：文件总的大小                    
            var percentComplete = Math.round((evt.loaded) * 100 / evt.total);    
            //加载进度条，同时显示信息          
            $("#percent").html(percentComplete + '%')
            $("#progressNumber").css("width",""+percentComplete+"px");             
        }
    }
</script>
</html>