Ajax提交进度显示实例

Posted 迷茫小左

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax提交进度显示实例相关的知识，希望对你有一定的参考价值。

概述：ajax提交比较大的文件的时候，我们希望能够看到它上传的进度，代码放下面了。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>XMLHttpRequest 上传文件进度条示例</title>
</head>
<body>
<progress id="upload_progress" value="0" max="100"></progress>
<input id="upload_file" type="file" name="upload_file" />
<button id="btn_start">Start</button>
<button id="btn_cancel">Cancel</button>
<script type="text/javascript" src="/res/lib/jquery-1.11.3.js"></script>
<script type="text/javascript">
var xhr = new XMLHttpRequest();
var progressBar = document.getElementById(‘upload_progress‘);
$(‘#btn_start‘).click(function() {
    var uploadFile = document.getElementById(‘upload_file‘).files[0];
    var formData = new FormData();
    formData.append(‘upload_file‘, uploadFile);

    // ---------------------------------------
    // 原生xmlHttpRequest发送
    xhr.open(‘post‘, ‘/server_url.php‘);
    xhr.onload = function() {
        alert(‘完成！‘);
    };
    xhr.onerror = function() {
        alert(‘无法连接服务器！‘);
    };
    xhr.upload.onprogress = function(progress) {
        if (progress.lengthComputable) {
            console.log(progress.loaded / progress.total * 100);
            progressBar.max = progress.total;
            progressBar.value = progress.loaded;
        }
    };
    xhr.upload.onloadstart = function() {
        console.log(‘started...‘);
    };
    xhr.send(formData);

    // ---------------------------------------
    // 使用ajax发送
    /**
    $.ajax({
       type: "POST",
    　　url: "/server_url.php",
    　　data: formData , //这里上传的数据使用了formData 对象
    　　processData: false, 
    　　contentType: false, //必须false才会自动加上正确的Content-Type
    　　//这里我们先拿到jQuery产生的 XMLHttpRequest对象，为其增加 progress 事件绑定，然后再返回交给ajax使用
    　　xhr: function() {
    　　　　var xhr = $.ajaxSettings.xhr();
    　　　　if (xhr.upload) {
    　　　　　　xhr.upload.onprogress = function(progress) {
                    if (progress.lengthComputable) {
                        console.log(progress.loaded / progress.total * 100);
                        progressBar.max = progress.total;
                        progressBar.value = progress.loaded;
                    }
                };
                xhr.upload.onloadstart = function() {
                    console.log(‘started...‘);
                };
     　　　 }
              return xhr;
     　 }
    }).done(function(resp) {
        alert(‘完成！‘);
    }).fail(function(err) {
        alert(‘无法连接服务器！‘)
    });*/

});

$(‘#btn_cancel‘).click(function() {
    xhr.abort();
});
</script>
</body>
</html>

原理就是这样，需要在此基础上做扩展的可以随意添加自己想要的功能。

以上是关于Ajax提交进度显示实例的主要内容，如果未能解决你的问题，请参考以下文章

如何在ajax文件上传中显示进度条

websocket实例(显示文件导入处理进度)

AJAX提交表单，上传出错的国际化信息无法显示在jsp页面上

活动到片段方法调用带有进度条的线程

当片段视图加载是异步任务的一部分时，如何在片段加载之前显示进度条？

ajax+FormData+javascript实现无刷新表单信息提交