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

最新推荐文章于 2022-11-17 16:33:08 发布

励志故事

最新推荐文章于 2022-11-17 16:33:08 发布

阅读量1w

点赞数

分类专栏： Java相关 Web前端文章标签： ajax ajax上传上传进度条进度条 ajax上传文件

本文链接：https://blog.csdn.net/LZGS_4/article/details/50372592

版权

Web前端同时被 2 个专栏收录

51 篇文章 0 订阅

订阅专栏

Java相关

27 篇文章 1 订阅

订阅专栏

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

1.上传文件：

首先我们用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()送到后台。

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

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',readFile,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", uploadProgress, 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>

效果如下：

Author：立礼

Sign：人生不要有太多的幻想，而要有更多的行动

励志故事

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
【Ajax】ajax上传文件及进度条的实现

html5上传是同步上传的方式，所以能够实现进度条的显示。 1.上传文件：首先我们用ajax来取得的file对象： var file = null; var input = $("#file_upload"); //文件域选择文件时, 执行readFile函数 input.addEventListener('change',readF
复制链接

扫一扫

专栏目录