前端接收字节数据流,显示图片
<!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>
共同学习,共同进步,若有补充,欢迎指出,谢谢!