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

服务器准备IIS

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

页面代码：

1. @H_512_28@!DOCTYPE html>   
2. html>   
3. head>   
4.     meta http-equiv="content-type" content="text/html; charset=utf-8">   
5.     meta name="format-detection" content="telephone=no">   
6.     meta name="msapplication-tap-highlight" content="no">   
7.     meta name="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.     div class="app">   
12.         h1> Html5上传文件测试，带进度条/h1>   
13.         div>   
14.             input type="file" value="" id="fileinput" name="files" onchange="fileSelected()" />   
15.             div style="margin:30px; ">   
16.                 input type="button" value="上传" onclick="uploaDFile()" />   
17.             /div>   
18.             div style="margin:30px; ">   
19.                 div id="fileName"> /div>   
20.                 div id="fileSize"> /div>   
21.                 div id="fileType"> /div>   
22.             /div>   
23.             div style="margin:30px; width:500px; height:15px; border:1px solid #aeaeae; ">   
24.                 div id="PRogress" style="background:#4CFf00; height:15px; width:0%; "> /div>   
25.                 div id="percentNumber"> /div>   
26.             /div>   
27.             div style="margin:30px; ">   
28.                 div id="msg"> /div>   
29.             /div>   
30.         /div>   
31.     /div>   
32.     script type="text/javascript">   
33.         function fileSelected() {   
34.             //重置状态显示   
35.             document.getElementById("msg").innerHTML = "";   
36.             document.getElementById('percentNumber').innerHTML = '';   
37.             document.getElementById("progress").style.width = "0%";   
38.             VAR file = document.getElementById('fileInput').files[0];   
39.             if (file) {   
40.                 var fileSize = 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.         }   
50.   
51.   
52.         function uploadFile() {   
53.             var fd = new FormData();   
54.             fd.append("fileInput", document.getElementById('fileInput').files[0]);   
55.             var xhr = new XMLHttpRequest();   
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.         function uploadProgress(evt) {   
66.             if (evt.lengthComputable) {   
67.                 var percentComplete = Math.round(evt.loaded * 100 / evt.total);   
68.                 document.getElementById('percentNumber').innerHTML = percentComplete + '%';   
69.                 var jindutiao = document.getElementById("progress");   
70.                 jindutiao.style.width = percentComplete + "%";   
71.             }   
72.             else {   
73.                 document.getElementById('percentNumber').innerHTML = '不支持进度计算';   
74.             }   
75.         }   
76.         function uploadComplete(evt) {   
77.             //evt.target.responseText   
78.             document.getElementById("msg").innerHTML = "上传成功";   
79.         }   
80.         function uploadFailed(evt) {   
81.             document.getElementById("msg").innerHTML = "上传过程中有一个错误";   
82.         }   
83.         function uploadCanceled(evt) {   
84.             document.getElementById("msg").innerHTML = "用户取消了上传或者浏览器删除了连接";   
85.         }   
86.     /script>   
87. /body>   
88. /html>   

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

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