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

来源：互联网发布：js div鼠标点击事件编辑：程序博客网时间：2024/06/07 09:48

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 0