前端接收字节数据流,显示图片

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>DGX测试验证码</title>

    </head>
    <body>
        <div>
            <h1>点击图片刷新验证码</h1>
        </div>
        <br />
        <div>
            <img id="kaptchaImage" />
        </div>

        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script>
            window.onload = function() {
                var request = new XMLHttpRequest();
                request.open("POST", "http://127.0.0.1:1234/captcha/image", true);
                request.responseType = "blob";
                request.onloadend = function() {
                    if (request.readyState === 4) {
                        if ((request.status >= 200 && request.status < 300) || request.status == 304) {
                            var blob = this.response;
                            document.getElementById('kaptchaImage').src = window.URL.createObjectURL(blob);
                        } else {
                            alert("处理请求失败返回的数据");
                        }
                    }
                }
                request.send();
            };
            $("#kaptchaImage").click(function() {
                var request = new XMLHttpRequest();
                request.open("POST", "http://127.0.0.1:1234/captcha/image", true);
                request.responseType = "blob";
                request.onloadend = function() {
                    if (request.readyState === 4) {
                        if ((request.status >= 200 && request.status < 300) || request.status == 304) {
                            var blob = this.response;
                            document.getElementById('kaptchaImage').src = window.URL.createObjectURL(blob);
                        } else {
                            alert("处理请求失败返回的数据");
                        }
                    }
                }
                request.send();
            });
        </script>
    </body>
</html>

共同学习,共同进步,若有补充,欢迎指出,谢谢!

12-24 23:30