HTML代碼:html
<div id="forAppend" class="demo"></div>
Javascript代碼:web
<script> var eleAppend = document.getElementById("forAppend"); window.URL = window.URL || window.webkitURL; if (typeof history.pushState == "function") { var xhr = new XMLHttpRequest(); xhr.open("get", "此處填寫您的圖片地址", true); xhr.responseType = "blob"; xhr.onload = function() { if (this.status == 200) { var blob = this.response; var img = document.createElement("img"); img.onload = function(e) { window.URL.revokeObjectURL(img.src); // 清除釋放 }; img.src = window.URL.createObjectURL(blob); eleAppend.appendChild(img); } } xhr.send(); } else { eleAppend.innerHTML = '<p style="color:#cd0000;">請更換瀏覽器重試~</p>'; } </script>
請務必在環境下運行瀏覽器
(來源:http://www.zhangxinxu.com/study/201310/blob-get-image-show.html 相似知識:http://blog.csdn.net/oscar999/article/details/36373183)app