<button id="upbtn">up</button> <div id="status"></div> <img style="display: none;" id="loadimg">
<script> var xhr = createXHR(); xhr.onload = function(event){ if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){ //alert(xhr.responseText); }else{ //alert('Request was unsuccessful: '+ xhr.status); } } xhr.onprogress = function(event){ var progress = ''; var divStauts = document.getElementById("status"); console.log(event); if(event.lengthComputable){ // progress = ""+Math.round(100*event.loaded/event.total)+"%"; progress = Math.round(100*event.loaded/1024); // divStauts.innerHTML = "Recevied " + progress + " of " + event.total + "bytes"; divStauts.innerHTML = "Recevied " + progress + " kb "; } } function createXHR(){ var xhr = null; try { // Firefox, Opera 8.0+, Safari,IE7+ xhr = new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xhr = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { xhr = null; } } } return xhr; } function upload(){ url = 'http://dohko.img.chouti.com/CHOUTI_9B121D59AC024B09A1740EDF35B3D7CB_W500H281.gif' xhr.open('get', url, true); xhr.send(null); $('#loadimg').attr('src' , url).show(); } $('#upbtn').click(function () { upload(); }) </script>