实现多文件上传功能：兼容IE与Firefox

"该资源提供了一个模仿126邮箱实现多文件上传的实例代码，旨在兼容Internet Explorer（IE）和Firefox等浏览器。" 在Web开发中，多文件上传功能是许多应用不可或缺的一部分，例如电子邮件服务、社交媒体平台或者云存储服务。这个实例主要涉及的技术和知识点包括： 1. **HTML与CSS**： - HTML5引入了`<input type="file">`标签，用于用户选择本地文件。在示例中，通过创建多个这样的输入元素来实现多文件选择。 - CSS用于设置文件上传按钮的样式，使其看起来更符合126邮箱的设计。在示例中，通过设置`width`, `border`, `height`, `padding`, `margin`, `position`, `opacity`, 和 `filter`属性，隐藏了实际的文件选择按钮，仅显示一个自定义的可点击区域。 2. **JavaScript**： - 使用JavaScript动态创建`<input type="file">`元素，并为其添加事件监听器。`onchange`事件触发时，表示用户已选择文件，此时会更新文件名展示并添加删除文件的功能。 - `TotalFiles`变量用于追踪已选择的文件数量，确保每个新添加的文件输入元素都有唯一的ID和name属性。 3. **DOM操作**： - `document.createElement("input")`用于创建新的HTML元素，这里创建的是`<input>`元素。 - `document.getElementById()`和`document.getElementsByName()`用于根据ID和name获取DOM元素。 - `innerHTML`属性用于修改元素内的HTML内容，如显示文件名并添加删除按钮。 4. **事件处理**： - `onclick`事件处理函数用于当用户点击“X”时删除选定的文件。这通过调用`DelFile`函数实现，该函数需要传入文件索引以定位并移除对应的文件输入元素。 5. **浏览器兼容性**： - 示例代码特别考虑了IE的兼容性，使用了如`filter:alpha(opacity=0)`等旧的CSS滤镜属性来实现透明效果，这在现代浏览器中通常是不必要的，但对老版本的IE来说是必要的。 6. **文件路径处理**： - 通过`substring`方法提取文件名，从路径的最后一个反斜杠(`\`)后开始截取，直到字符串结束。 7. **安全性提示**： - 在实际生产环境中，直接显示完整的文件路径可能带来安全风险，因为用户可能会看到他们不应该访问的其他文件路径。这个示例中只展示了文件名，这是一个较好的实践。 这个实例提供了一个基础的多文件上传框架，开发者可以在此基础上添加更多功能，如文件类型的验证、上传进度条、错误处理等。同时，为了提高用户体验，可以考虑使用HTML5的`FormData`对象和`XMLHttpRequest Level 2`的`FormData.append()`方法进行异步文件上传。