xhr 的 onpregress 监听上传数据的已上传和总大小-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_34569508/article/details/130738420

本文介绍了一个使用JavaScript实现的文件上传功能，通过FormData对象发送JSON数据，并利用XMLHttpRequest监听上传进度，展示了如何处理上传过程中的各种事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 var fd=new FormData();
        $('.mwd_uppingzheng_btna_ok').on('click',function () {
            // 数组转 str
            var strarr=JSON.stringify(arr_clip);
            // 给fd添加 str
            fd.append("file", strarr);
            // 创建xhr对象
            var xhr = new XMLHttpRequest();
            // 上传的时候 添加监听
            xhr.upload.addEventListener("progress", uploadProgress, false);
            // 上传完毕 添加结束事件
            xhr.addEventListener("load", uploadComplete, false);
            // 上传错误 的事件
            xhr.addEventListener("error", uploadFailed, false);
            // 用户取消的事件
            xhr.addEventListener("abort", uploadCanceled, false);
            // 后台接口
            xhr.open("POST", "${pageContext.request.contextPath }/upload");//修改成自己的接口
            xhr.send(fd);
            // 展示 进度弹窗
            $('.mdw_uploadingfn').show();
        })
        // 上传中
        function uploadProgress(evt) {
            if (evt.lengthComputable) {
                var percent = Math.round(evt.loaded * 100 / evt.total);
                $('.mdw_uploading_contgiffn').html(percent+'%');
            }
            else {
                $('.mdw_uploading_contgiffn').html('无法计算');
            }
        }
        // 上传结束
        function uploadComplete(evt) {
            /* 服务器端返回响应时候触发event事件*/
            $('.mdw_uploadingfn').hide();
            $('.mdw_uploading_contgiffn').html(0+'%');
            arr_clip=[];
            // 展示缩略图
            show_arr_clips();
        }
        // 无法上传
        function uploadFailed(evt) {
            alert("无法上传");
        }
        // 用户取消
        function uploadCanceled(evt) {
            alert("用户取消了上传");
        }