To achieve the display of the progress bar, you need to know two parameters, the size of the upload and the total file size HTML5 provides an upload process event, triggered during the upload process, and then use the uploaded size/total size, calculate the percentage of uploads, and then use this percentage to control the display of the Div box, You can implement the upload progress bar effect
Front Page
<!doctype html>loaded:15020, total:15020, eventphase:0, Bubbles:false, Cancelable:false, Defaultprevented:false,
timestamp:1445144855459000, Originaltarget:xmlhttprequestupload}if (ev.lengthcomputable) {var precent=100 * Ev.loaded/ev.total;console.log (precent);d Ocument.getelementbyid (' nei '). style.width=precent+ '% '; document.getElementById (' precent '). Innerhtml=math.floor (precent) + '% ';}} Fd.append (' pic ', pic); Xhr.send (FD);} </script><style> #wai {width:500px;height:30px;border:1px solid green;} #nei {width:0px;height:30px;background:green;} </style>Page Display effect
Ajax Upload file progress bar display