在本文中，我们将深入探讨如何使用HTML5实现异步文件上传功能，同时支持跨域请求并展示上传进度条。这是一个非常实用的技术，特别是在现代Web应用中，用户常常需要上传大文件，而实时的进度反馈可以提供更好的用户体验。
我们要明白HTML5引入了一种新的API，即`File API`，它允许我们在JavaScript中处理文件和数据，从而实现异步上传。关键在于`FormData`对象，它可以用来封装表单数据，包括文件。在异步上传中，我们通常会使用`XMLHttpRequest`的`FormData`实例来发送文件。
**一、服务器配置**
为了支持跨域上传，我们需要在服务器端进行一些配置。对于IIS服务器，我们需要设置HTTP响应标头中的`Access-Control-Allow-Origin`字段。这个字段用于指定哪些源可以访问资源，设置为星号`*`表示允许所有源访问。不设置或设置不当会导致像Chrome这样的现代浏览器因同源策略限制而报错。
**二、HTML页面**
HTML页面中，我们创建一个简单的表单，包含一个文件输入控件和一个上传按钮。通过`onchange`事件监听文件选择，而`onclick`事件触发文件上传。页面还包含了用于显示文件名、大小、类型以及上传进度的元素。
```html
<!-- 省略部分代码 -->
<input type="file" value="" id="fileInput" name="files" onchange="fileSelected()" />
<input type="button" value="上传" onclick="uploadFile()" />
<div id="progress" style="background:#4cff00;height:15px;width:0%;"></div>
<div id="percentNumber"></div>
<!-- 省略部分代码 -->
```
**三、JavaScript**
在JavaScript中，我们编写`fileSelected`和`uploadFile`两个函数。`fileSelected`函数用于初始化状态，`uploadFile`函数负责实际的文件上传。
1. `fileSelected`函数清空消息和进度条，并获取选中的文件。
2. `uploadFile`函数创建一个`FormData`对象，将文件添加进去，然后使用`XMLHttpRequest`创建一个异步请求。
3. 设置请求的URL和类型（通常是POST），并打开连接。
4. 配置请求头，如`Content-Type`通常设为`multipart/form-data`。
5. 添加`onprogress`事件监听器，以更新上传进度。
6. 发送请求，并在`onreadystatechange`事件中处理响应。
```javascript
// 省略部分代码
function uploadFile() {
var xhr = new XMLHttpRequest();
var formData = new FormData();
var file = document.getElementById('fileInput').files[0];
formData.append('file', file);
xhr.open('POST', 'your/upload/url', true);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.upload.addEventListener('progress', function(event) {
if (event.lengthComputable) {
var percent = Math.round((event.loaded / event.total) * 100);
document.getElementById('progress').style.width = percent + '%';
document.getElementById('percentNumber').innerHTML = percent + '%';
}
});
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 处理成功的响应
} else if (xhr.readyState === 4) {
// 处理错误的响应
}
};
xhr.send(formData);
}
```
**四、服务器端处理**
服务器端需要接收并处理POST请求中的文件。这取决于你所使用的后端技术，例如Node.js、PHP、ASP.NET等。你需要解析接收到的`FormData`，并将文件保存到服务器的指定位置。
总结来说，使用HTML5实现异步文件上传，支持跨域并显示进度条，主要涉及`File API`、`FormData`对象、`XMLHttpRequest`以及服务器端的跨域配置。通过这些技术，我们可以创建出一个用户友好的文件上传功能，提供实时的进度反馈，提升用户体验。
