使用Html5实现异步上传文件,支持跨域

页面代码：

8. Html5上传文件
12. Html5上传文件测试，带进度条
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. }

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！