使用ajax时给ajax绑定上一个进度条的简单示例

时间：2024-04-27 13:06:56

直接放代码。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

    <title>Title</title>

</head>

<body>

<input type="file"  id="myFile"/>

<progress id="myProgress" value="0"></progress>

<hr/>

<script src="${pageContext.request.contextPath}/js/jquery-1.12.3.js"></script>

<script>//第一种方式，ajax绑定进度条

    $("#myFile").change(function () {

        var formData = new FormData();

        formData.append("filename",$(this)[0].files[0]);

        $.ajax({

            method: "post",//请求方式

            url: "xxxx",//请求服务端地址

            data: formData,　//这里上传的数据使用了formData 对象

            contentType: false,//避免JQuery操作头部信息，丢失边界符，从而使服务端无法识别此编码类型文件

            processData: false,//不序列化将要传输的文件数据

            xhr: function () {

                //这里我们先拿到jQuery产生的 XMLHttpRequest对象，为其增加 progress 事件绑定，然后再返回交给ajax使用

                var xhr = $.ajaxSettings.xhr();

                if (onprogress && xhr.upload) {

                    xhr.upload.addEventListener("progress", onprogress, false);

                    return xhr;

                }

            },

            success:function () {//完成事件时

            },

            error:function () {//出现错误时的事件

            }

        });

    });

    /**

     * 侦查附件上传情况 ,这个方法大概0.05-0.1秒执行一次

     */

    function onprogress(evt) {

        var loaded = evt.loaded;     //已经上传大小情况

        var tot = evt.total;      //附件总大小

        var per = Math.floor(100 * loaded / tot);  //已经上传的百分比

        $("#myProgress").attr("value",per);

    }

</script>

</body>

</html>