通过AJAX监控文件上传进度

### 通过 AJAX 监控文件上传进度 在 Web 开发中，文件上传是常见的功能之一。传统的文件上传机制是基于 HTTP 协议的表单提交，即用户通过 `<input type="file">` 选择文件后，整个表单或文件被一次性发送到服务器。这种方式虽然简单易用，但在文件较大的情况下，用户体验较差，尤其是在早期的 Internet Explorer 浏览器上，可能出现浏览器卡顿、无响应等问题。 为了解决这些问题，可以利用 AJAX 技术来监控文件上传的进度，并给予用户及时的反馈。下面将详细介绍如何实现这一功能。 #### 使用标准的文件上传方式 我们保留传统的文件上传方式，即使用 `<input type="file">` 元素来让用户选择文件。这是因为直接使用 AJAX 进行文件上传会遇到较多问题，如浏览器兼容性、跨域限制等。因此，我们采取折中的方案：先通过标准方式上传文件，再借助 AJAX 技术实时获取上传进度。 #### 实现 AJAX 进度监控 1. **创建 XMLHttpRequest 对象**： - 根据不同的浏览器环境，创建 XMLHttpRequest 或 ActiveXObject 对象。这是因为旧版的 IE 浏览器并不支持 XMLHttpRequest，而是使用 ActiveXObject 来实现类似的功能。 ```javascript function getXMLHttpRequest() { var http_request; if (window.XMLHttpRequest) { // 非 IE 浏览器 http_request = new XMLHttpRequest(); if (http_request.overrideMimeType) { http_request.overrideMimeType('text/xml'); } } else if (window.ActiveXObject) { // IE 浏览器 try { http_request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e1) { try { http_request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { // IE 不支持 XMLHttpRequest } } } return http_request; } ``` 2. **定义 AJAX 请求函数**： - 定义一个函数 `sendGetDictate` 用于发送 AJAX 请求。 ```javascript function sendGetDictate(http_request, url) { http_request.open("GET", url, true); http_request.send(null); } ``` 3. **定时检查上传状态**： - 使用 `setTimeout` 函数每隔一段时间（例如 500 毫秒）调用 `checkupload` 函数，该函数负责发送 AJAX 请求并处理返回的结果。 ```javascript function checkupload() { req = getXMLHttpRequest(); req.onreadystatechange = setActiveContent; sendGetDictate(req, "/manager/servlet/imageservlet?tag=ajaxuploadfilecheck&WARE_ID=609187669&nocache=" + Math.random(), "name=111"); } ``` 4. **处理服务器响应**： - 当服务器返回数据时，根据返回的状态码执行相应的操作。这里使用了一个变量 `count` 来控制循环次数，防止无限循环。 ```javascript var count = 0; // 控制循环次数 function setActiveContent() { if (req.readyState == 4) { if (req.status == 200) { var rettext = req.responseText; // 获取服务器返回的内容 if (rettext == "-1") { alert("停止循环"); } else if (rettext == "0") { if (count < 6) { setTimeout("checkupload()", 500); count++; } else { alert("上传失败"); } } else if (rettext == "1") { alert("文件上传成功"); } } } } ``` #### 总结 通过上述步骤，我们可以实现在文件上传过程中实时显示上传进度的效果。这种方法不仅提高了用户体验，而且减少了因文件上传过程中的不确定因素而引发的问题。同时，由于采用了传统的文件上传方式与 AJAX 结合的方式，避免了许多直接使用 AJAX 上传文件可能遇到的技术难题。