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

网络
雪让人的觉得只有一个字——冷。大地一片银白，一片清洁，而雪花仍如柳絮，如棉花，如鹅毛从天空飘飘洒洒。

服务器准备IIS

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

页面代码：

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <metahttp-equiv="content-type"content="text/html;charset=utf-8">
  5. <metaname="format-detection"content="telephone=no">
  6. <metaname="msapplication-tap-highlight"content="no">
  7. <metaname="viewport"content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width">
  8. <title>Html5上传文件</title>
  9. </head>
  10. <body>
  11. <divclass="app">
  12. <h1>Html5上传文件测试，带进度条</h1>
  13. <div>
  14. <inputtype="file"value=""id="fileInput"name="files"onchange="fileSelected()"/>
  15. <divstyle="margin:30px;">
  16. <inputtype="button"value="上传"onclick="uploadFile()"/>
  17. </div>
  18. <divstyle="margin:30px;">
  19. <divid="fileName"></div>
  20. <divid="fileSize"></div>
  21. <divid="fileType"></div>
  22. </div>
  23. <divstyle="margin:30px;width:500px;height:15px;border:1pxsolid#aeaeae;">
  24. <divid="progress"style="background:#4cff00;height:15px;width:0%;"></div>
  25. <divid="percentNumber"></div>
  26. </div>
  27. <divstyle="margin:30px;">
  28. <divid="msg"></div>
  29. </div>
  30. </div>
  31. </div>
  32. <scripttype="text/javascript">
  33. functionfileSelected(){
  34. //重置状态显示
  35. document.getElementById("msg").innerHTML="";
  36. document.getElementById('percentNumber').innerHTML='';
  37. document.getElementById("progress").style.width="0%";
  38. varfile=document.getElementById('fileInput').files[0];
  39. if(file){
  40. varfileSize=0;
  41. if(file.size>1024*1024)
  42. fileSize=(Math.round(file.size*100/(1024*1024))/100).toString()+'MB';
  43. else
  44. fileSize=(Math.round(file.size*100/1024)/100).toString()+'KB';
  45. document.getElementById('fileName').innerHTML='Name:'+file.name;
  46. document.getElementById('fileSize').innerHTML='Size:'+fileSize;
  47. document.getElementById('fileType').innerHTML='Type:'+file.type;
  48. }
  49. }
  52. functionuploadFile(){
  53. varfd=newFormData();
  54. fd.append("fileInput",document.getElementById('fileInput').files[0]);
  55. varxhr=newXMLHttpRequest();
  56. xhr.upload.addEventListener("progress",uploadProgress,false);
  57. xhr.addEventListener("load",uploadComplete,false);
  58. xhr.addEventListener("error",uploadFailed,false);
  59. xhr.addEventListener("abort",uploadCanceled,false);
  60. xhr.open("POST","http://10.0.0.200:9001/Home/Upload");//修改为自己服务器接口地址
  61. //xhr.setRequestHeader("Access-Control-Allow-Origin","*");//需要在IIS里面配置，就可以跨域请求了
  62. //xhr.setRequestHeader("Content-Type","multipart/form-data");
  63. xhr.send(fd);
  64. }
  65. functionuploadProgress(evt){
  66. if(evt.lengthComputable){
  67. varpercentComplete=Math.round(evt.loaded*100/evt.total);
  68. document.getElementById('percentNumber').innerHTML=percentComplete+'%';
  69. varjindutiao=document.getElementById("progress");
  70. jindutiao.style.width=percentComplete+"%";
  71. }
  72. else{
  73. document.getElementById('percentNumber').innerHTML='不支持进度计算';
  74. }
  75. }
  76. functionuploadComplete(evt){
  77. //evt.target.responseText
  78. document.getElementById("msg").innerHTML="上传成功";
  79. }
  80. functionuploadFailed(evt){
  81. document.getElementById("msg").innerHTML="上传过程中有一个错误";
  82. }
  83. functionuploadCanceled(evt){
  84. document.getElementById("msg").innerHTML="用户取消了上传或者浏览器删除了连接";
  85. }
  86. </script>
  87. </body>
  88. </html>

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

您可能有感兴趣的文章
HTML5之高度塌陷问题的如何解决
html5笛卡尔心形曲线的如何实现
如何使用feDisplacementMap+feImage滤镜如何实现水波纹效果(计算动态值)
如何使用canvas对video视频某一刻截图功能
Canvas如何做个雪花屏版404的如何实现