使用Html5实现异步上传文件,支持跨域,带有上传进度条
更新时间:2023-04-03 04:36:10 阅读： 评论：0
服务器准备iis
需要设置iis里面的http响应标头，如图添加如下设置，添加这项“access-control-allow-origin”，只有添加了这行才能支持跨域，不然像chrome浏览器会报错
页面代码：
xml/html code
复制内容到剪贴板
<!doctypehtml><html><head><metahttp-equiv=“content-type”content=“text/html;chart=utf-8”><metaname=“format-detection”content=“telephone=no”><metaname=“msapplication-tap-highlight”content=“no”><metaname=“viewport”content=“ur-scalable=no兰州技校,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width”><title>html5上传文件</title></head><body><divclass=“app”><h1>html5上传文件测试，带进度条</h1><div><inputtype=“file”value=“”id=“fileinput”name=“files”onchange=“filelected()”/><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;width:500px;height:15px;border:1pxsolid#aeaeae;”><divid=“progress”style=“background:#4cff00;height:15px;width:0%;”></div><divid=“percentnumber”></div>esi学科</div><divstyle=“margin:30p英文简历怎么写x;”><divid=“msg”></div></div></div></div><scripttype=“text/javascript”>functionfilelected(){ //重置状态显示 document.getelementbyid(“msg”).innerhtml=“”; document.getelementbyid(‘percentnumber’).innerhtml=”; document.getelementbyid(“progress”).style.width=“0%”; varfile=document.getelementbyid(‘fileinput’).files[0]; if(file){ varfilesize=0; if(file.size>1024*1024) filesize=(math.round(file.size*100/(1024*1024))/100).tostring()+‘mb’; el filesize=(math.round(file.size*100/1024)/100).tostring()+‘kb’; document.getelementbyid(‘filename’).innerhtml=‘name:‘+file.name; document.getelementbyid(‘filesize’).innerhtml=‘size:‘+filesize; document.getelementbyid(‘filetype’).innerhtml=‘type:‘+file.type; } } functionuploadfile(){ varfd=newformdata(); fd.append(“fileinput”,document.getelementbyid(‘fi英雄的故事leinput’).files[0]); varxhr=newxmlhttprequest(); xhr.upload.addeventlistener(“progress”,uploadprogress,fal); xhr.addeventlistener(“load”,uploadcomplete,fal); xhr.addeventlistener(“error”,uploadfailed,fal); xhr.addeventlistener(“abort”,uploadcanceled,fal); xhr.open(“post”,“http://10.0.0.200:9001/home/upload”);//修改为自己服务器接口地址 //xhr.trequestheader(“access-control-allow-origin”,“*”);//需要在iis里面配置，就可以跨域请求了 //xhr.trequestheader(“content-type”,“multipart/form-data”); xhr.nd(fd); } functionuploadprogress(evt){ if(evt.lengthcomputable){ varpercentcomplete=math.round(evt.loaded*100/evt.total); document.getelementbyid(‘percentnumber’).innerhtml=percentcomplete+‘%’; varjindutiao=document.getelementbyid(“progress”); jindutiao.style.width=percentcomplete+“%”; } el{ document.getelementbyid(‘percentnumber’).innerhtml=‘不支持进度计算’; } } functionuploadcomplete(evt){ //evt.target.respontext document.getelementbyid(“msg”).innerhtml=“上传成功”; } furadio ladynctionuploadfailed(evt){ document.getelementbyid(“msg”).innerhtml=“上传过程中有一个错误”; } functionuploadcanceled(evt){ document.getelementbyid(“msg”).innerhtml=“用户取消了上传或者浏览器删除了连接”; } </script></body></html>以上这篇使用html5实现异步上传文件,支持跨域,带有上传进度条就是www.887551.com分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持www.887551.com。
本文word下载地址：使用Html5实现异步上传文件,支持跨域,带有上传进度条.doc
本文 PDF 下载地址：使用Html5实现异步上传文件,支持跨域,带有上传进度条.pdf
