使用Html5实现异步上传文件,支持跨域,带有上传进度条

2016-09-17 0 318

服务器准备IIS

需要设置IIS里面的HTTP响应标头，如图添加如下设置，添加这项“Access-Control-Allow-Origin”，只有添加了这行才能支持跨域，不然像Chrome浏览器会报错

页面代码：

XML/HTML Code复制内容到剪贴板 <!DOCTYPEhtml> <html> <head> <metahttp-equiv="content-type"content="text/html;charset=utf-8"> <metaname="format-detection"content="telephone=no"> <metaname="msapplication-tap-highlight"content="no"> <metaname="viewport"content="user-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="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;width:500px;height:15px;border:1pxsolid#aeaeae;"> <divid="progress"style="background:#4cff00;height:15px;width:0%;"></div> <divid="percentNumber"></div> </div> <divstyle="margin:30px;"> <divid="msg"></div> </div> </div> </div> <scripttype="text/javascript"> functionfileSelected(){ //重置状态显示 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\’; else 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(\’fileInput\’).files[0]); varxhr=newXMLHttpRequest(); xhr.upload.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/Home/Upload");//修改为自己服务器接口地址 //xhr.setRequestHeader("Access-Control-Allow-Origin","*");//需要在IIS里面配置，就可以跨域请求了 //xhr.setRequestHeader("Content-Type","multipart/form-data"); xhr.send(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+"%"; } else{ document.getElementById(\’percentNumber\’).innerHTML=\’不支持进度计算\’; } } functionuploadComplete(evt){ //evt.target.responseText document.getElementById("msg").innerHTML="上传成功"; } functionuploadFailed(evt){ document.getElementById("msg").innerHTML="上传过程中有一个错误"; } functionuploadCanceled(evt){ document.getElementById("msg").innerHTML="用户取消了上传或者浏览器删除了连接"; } </script> </body> </html>

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

本知识来源于互联网索引，如有侵权请联系我们！

收藏 (0) 打赏

感谢您的支持，我会继续努力的!

打开微信/支付宝扫一扫，即可进行扫码打赏哦，分享从这里开始，精彩与您同在！

1、寻代码所有源码、代码、教程和软件均为作者提供和网友推荐收集整理而来！
2、寻代码提供的所有模块、软件等资源，均不提供任何技术服务，请知悉！
3、如您需要商用，请支持正版，寻代码网站所提供的程序仅供学习和研究使用！
4、寻代码源码不得使用于非法商业用途，不得违反国家法律。您必须在下载后24小时内删除！
5、寻代码资源每天实时更新，如遇压缩包解压密码，一律为：www.xundm.com
6、寻代码资源售价和VIP会员只是赞助，收取费用仅维持本站的日常运营所需！
7、如有链接无法下载、失效或广告，请在会员中心下工单！
如有侵犯您版权的，请来信（邮箱:[email protected]）指出，本站将立即改正。

寻代码网站制作使用Html5实现异步上传文件,支持跨域,带有上传进度条 https://xundm.com/201616716.html