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

直接放代码。

<%@ 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>

 

posted @ 2018-11-07 15:32  追梦滴小蜗牛  阅读(1404)  评论(0)  编辑  收藏  举报