页面代码：

XML/HTML代码复制内容到剪贴板

！DOCTYPEhtml

超文本标记语言

头

meta http-equiv=' content-type ' content=' text/html；charset=utf-8 '

元名称='格式检测'内容='电话=否'

meta name=' ms application-tap-highlight ' content=' no '

meta name=' viewport ' content=' user-scalable=no，initial-scale=1，max-scale=1，min-scale=1，width=device-width '

titleHtml5上传文件/title

/head

身体

divclass='app '

h1Html5上传文件测试，带进度条/h1

差异

输入类型=' file '值=' id=' FileInput '名称=' files ' on change=' FileSelected()'/

divstyle=' margin:30px '

inputtype='button'value='上传onclick='uploadFile()'/

/div

divstyle=' margin:30px '

divid='fileName'/div

divid='fileSize'/div

divid='fileType'/div

/div

divstyle=' margin:30px宽度宽度：500像素宽度：15像素'边框：1像素实心# aeaeae '

divid=' progress ' style=' background : # 4 CFF 00；高度：15px宽度：0%;/div

divid='percentNumber'/div

/div

divstyle=' margin:30px '

divid='msg'/div

/div

/div

/div

scripttype='text/javascript '

选定的函数文件(){

//重置状态显示

document.getElementById('msg ').innerHTML=

文件。GetElementBYID(' PercentNumber ').innerHTML=

文件。GetElementBYID(' progress ')。风格。宽度=' 0% '；

var file=document。GetElementBYid('文件输入').文件[0];

if(文件){

varfileSize=0；

if(file.size1024*1024)

文件大小=(数学。圆形(文件。尺寸* 100/(1024 * 1024))/100).toString()' MB '；

其他

文件大小=(数学。圆形(文件。尺寸* 100/1024)/100).toString()' KB '；

document.getElementById('文件名')。innerHTML='Name: '文件名；

文件。GetElementBYID(' FileSize ').innerHTML=' Size: '文件大小

文件。GetElementBYID('文件类型').innerHTML='Type: '文件。类型；

}

}

functionuploadFile(){

var FD=Newformdata()；

fd.append('fileInput '，文档。GetElementBYid('文件输入').文件[0]);

var xhr=Newxmlhttprequest()；

xhr。上传。addeventlistener(' progress '，uploadProgress，false)；

xhr.addEventListener('load '，uploadComplete，false)；

xhr.addEventListener('error '，uploadFailed，false)；

xhr.addEventListener('abort '，uploadCanceled，false)；

xhr.open('POST '，' http://10。0 .0 .200:9001/首页/上传')；//修改为自己服务器接口地址

//xhr。setrequest header(' Access-Control-Allow-Origin '，' * ')；//需要在（同移民检查员移民检查)里面配置，就可以跨域请求了

//xhr。setrequestheader(“内容类型”、“多部分/表单数据”)；

xhr。发送(FD)；

}

功能加载进度(evt){

if(evt.lengthComputable){

varpercentComplete=数学。圆形(evt。加载* 100/evt。合计)；

文件。GetElementBYID(' PercentNumber ').innerHTMl=PercentComplete " %

varjindutiao=document。GetElementbyID(' progress ')；

金都岛。风格。width=PercentComplete " %

}

else{

文件。GetElementBYID(' PercentNumber ').innerHTML='不支持进度计算；

}

}

功能加载完成(evt){

//evt.target.responseText

document.getElementById('msg ').innerHTML='上传成功；

}

功能加载失败(evt){

document.getElementById('msg ').innerHTML='上传过程中有一个错误；

}

功能加载取消(evt){

document.getElementById('msg ').innerHTML='用户取消了上传或者浏览器删除了连接；

}

/script

/body

/html

以上这篇使用Html5实现异步上传文件，支持跨域，带有上传进度条就是小编分享给大家的全部内容了，希望能给大家一个参考