\u8981\u5b9e\u73b0\u8fdb\u5ea6\u6761\u7684\u663e\u793a,\u5c31\u8981\u77e5\u9053\u4e24\u4e2a\u53c2\u6570\uff0c\u4e0a\u4f20\u7684\u5927\u5c0f\u548c\u603b\u6587\u4ef6\u7684\u5927\u5c0f
html5\u63d0\u4f9b\u4e86\u4e00\u4e2a\u4e0a\u4f20\u8fc7\u7a0b\u4e8b\u4ef6\uff0c\u5728\u4e0a\u4f20\u8fc7\u7a0b\u4e2d\u4e0d\u65ad\u89e6\u53d1\uff0c\u7136\u540e\u7528\u5df2\u4e0a\u4f20\u7684\u5927
\u5c0f\/\u603b\u5927\u5c0f,\u8ba1\u7b97\u4e0a\u4f20\u7684\u767e\u5206\u6bd4,\u7136\u540e\u7528\u8fd9\u4e2a\u767e\u5206\u6bd4\u63a7\u5236div\u6846\u7684\u663e\u793a\uff0c\u5c31\u53ef\u4ee5
\u5b9e\u73b0\u4e0a\u4f20\u7684\u8fdb\u5ea6\u6761\u6548\u679c<\/p>\n\n\n\n
<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Ajax\u4e0a\u4f20\u6587\u4ef6\u8fdb\u5ea6\u6761\u663e\u793a<\/title>\n<script type=\"text\/javascript\">\nfunction upfile(){\n var pic=document.getElementsByTagName('input')[0].files[0];\n var fd=new FormData();\n var xhr=new XMLHttpRequest();\n xhr.open('post','01.php',true);\n xhr.onreadystatechange=function (){\n if(this.readyState==4){\n document.getElementById('precent').innerHTML=this.responseText;\n }\n }\n xhr.upload.onprogress=function (ev){\n \/\/console.log(ev);\u63a7\u5236\u53f0\u6253\u5370progress { target: XMLHttpRequestUpload, isTrusted: true, lengthComputable: true,<br> \/\/loaded: 15020, total: 15020, eventPhase: 0, bubbles: false, cancelable: false, defaultPrevented: false, <br>\/\/timeStamp: 1445144855459000, originalTarget: XMLHttpRequestUpload }\n if(ev.lengthComputable){\n var precent=100 * ev.loaded\/ev.total;\n console.log(precent);\n document.getElementById('nei').style.width=precent+'%';\n document.getElementById('precent').innerHTML=Math.floor(precent)+'%';\n }\n }\n fd.append('pic',pic);\n \n xhr.send(fd);\n \n}\n<\/script>\n<style>\n#wai{\nwidth:500px;\nheight:30px;\nborder:1px solid green;\n}\n#nei{\nwidth:0px;\nheight:30px;\nbackground:green;\n}\n<\/style>\n<\/head>\n<body>\n <div id=\"wai\">\n <div id=\"nei\"><\/div>\n <\/div><span id=\"precent\"><\/span><br\/>\n <input type=\"file\" name=\"pic\" onchange=\"upfile();\"\/>\n<\/body>\n<\/html><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u8981\u5b9e\u73b0\u8fdb\u5ea6\u6761\u7684\u663e\u793a,\u5c31\u8981\u77e5\u9053\u4e24\u4e2a\u53c2\u6570\uff0c\u4e0a\u4f20\u7684\u5927\u5c0f\u548c\u603b\u6587\u4ef6\u7684\u5927\u5c0fhtml5\u63d0\u4f9b\u4e86\u4e00\u4e2a\u4e0a\u4f20\u8fc7\u7a0b\u4e8b\u4ef6\uff0c\u5728\u4e0a\u4f20\u8fc7\u7a0b\u4e2d\u4e0d […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[24],"class_list":["post-74","post","type-post","status-publish","format-standard","hentry","category-front-end","tag-ajax"],"_links":{"self":[{"href":"https:\/\/www.zhangshuwei.com\/index.php\/wp-json\/wp\/v2\/posts\/74","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.zhangshuwei.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.zhangshuwei.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.zhangshuwei.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.zhangshuwei.com\/index.php\/wp-json\/wp\/v2\/comments?post=74"}],"version-history":[{"count":2,"href":"https:\/\/www.zhangshuwei.com\/index.php\/wp-json\/wp\/v2\/posts\/74\/revisions"}],"predecessor-version":[{"id":80,"href":"https:\/\/www.zhangshuwei.com\/index.php\/wp-json\/wp\/v2\/posts\/74\/revisions\/80"}],"wp:attachment":[{"href":"https:\/\/www.zhangshuwei.com\/index.php\/wp-json\/wp\/v2\/media?parent=74"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zhangshuwei.com\/index.php\/wp-json\/wp\/v2\/categories?post=74"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zhangshuwei.com\/index.php\/wp-json\/wp\/v2\/tags?post=74"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}