异步上传数据（ajax，页面无刷新）

最新推荐文章于 2022-08-16 11:13:07 发布

qcyfred

最新推荐文章于 2022-08-16 11:13:07 发布

阅读量548

点赞数

分类专栏： JAVA EE 文章标签： ajax 前端

JAVA EE 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

之前有一篇：异步加载数据

下面是异步上传数据。（页面无刷新加载）

我想这是一对。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>xhr level2 异步上传</title>
    <script type="text/javascript" src="jquery路径..."></script>
</head>
<body>
    <div>
        <p id="upfile">附件： <input type="file" id="myfile" style="display: inline"></p>
        <p id="upbtn">
            <input style="padding-left:50px;padding-right: 50px;" type="button" value="异步上传" οnclick="upload();">
            <span id="uptxt" style="display: none">正在上传...</span>
            <span id="upprog"></span>
            <button id="stopbtn" style="display:none;">停止上传</button>
        </p>
    </div>


    <div id="flist" style="border:1px dotted darkgray;"></div>


<script>
    function upload() {
        // 1.准备FormData
        var fd = new FormData();
        fd.append("myfile", $("#myfile")[0].files[0]);


        // 创建xhr对象
        var xhr = new XMLHttpRequest();




        // 监听状态，实时响应
        // xhr 和 xhr.upload 都有progress事件，xhr.progress是下载进度，xhr.upload.progress是上传进度
        xhr.upload.onprogress = function(event) {
            if (event.lengthComputable) {
                var percent = Math.round(event.loaded * 100 / event.total);
                console.log('%d%', percent);
                $("#upprog").text(percent);
            }
        };


        // 传输开始事件
        xhr.onloadstart = function(event) {
            console.log('load start');
            $("#upprog").text('开始上传');


            $("#stopbtn").one('click', function() {
               xhr.abort();
                $(this).hide();
            });


            loading(true);
        };


        // ajax过程成功完成事件
        xhr.onload = function(event) {
            console.log('load success');
            $("#upprog").text('上传成功');


            console.log(xhr.responseText);
            var ret = JSON.parse(xhr.responseText);
            addToFlist(ret.fname);
        };


        // ajax过程发生错误事件
        xhr.onerror = function(event) {
            console.log('error');
            $("#upprog").text('发生错误');
        };


        // ajax被取消
        xhr.onabort = function(event) {
            console.log('abort');
            $("#upprog").text('操作被取消');
        };


        // loadend传输结束，不管成功失败都会被触发
        xhr.onloadend = function (event) {
            console.log('load end');
            loading(false);
        };


        // 发起ajax请求传送数据
        xhr.open('POST', '/upload3', true);
        xhr.send(fd);
    }


    
    function addToFlist(fname) {
        var temp = ["<p id='" + fname + "'>",
                    fname,
            "<button οnclick='delFile(\"" + fname + "\");'>删除</button>",
                    "</p>"
                    ];
        $("#flist").append(temp.join(""));
    }


    function delFile(fname) {
        console.log('to delete file: ' + fname);
        // TODO: 请实现
    }


    function loading(showloading) {
        if (showloading) {
            $("#uptxt").show();
            $("#stopbtn").show();
        } else {
            $("#uptxt").hide();
            $("#stopbtn").hide();
        }
    }
</script>
</body>
</html>

亲测有效。

注意post的url、引入jquery的js文件。

代码有点多，但是通俗易懂。使用过AJAX的人都知道，XHR对象提供了一个onreadystatechange的回调方法来监听整个请求/响应过程。在XMLHttpRequest2级规范中又多了几个进度事件。有以下6个事件:

　　　　1.loadstart: 在接收到响应数据的第一个字节时触发。

　　　　2.progress: 在接收响应期间持续不断地触发。

　　　　3.error: 在请求发生错误时触发。

　　　　4.abort: 在因为调用abort()方法而终止连接时触发。

　　　　5.load: 在接收到完整的响应数据时触发。

　　　　6.loadend: 在通信完成或者触发error,abort,load事件后触发。

　　这次我们可以解读代码:当传输事件开始后，我们便在停止传送按钮上添加点击事件，内置了abort方法可以停止传送。若不点则会正常上传直到传送完毕为止。