类似QQ邮箱的js附件上传源代码

这段代码是实现一个类似QQ邮箱的JavaScript附件上传功能的示例。主要知识点包括： 1. **JavaScript事件处理**： - `onchange` 事件：当用户在`<input type="file">`元素中选择了一个文件后触发。在这个例子中，`addAttachmentToList()`函数在用户选择文件后被调用，用于处理文件选择后的操作。 2. **DOM操作**： - `createElement`：创建新的HTML元素，如`<span>`，用于显示附件信息。 - `appendChild`：将新创建的元素添加到指定父元素的子节点列表末尾。 - `insertAdjacentHTML`：在元素前后插入HTML字符串，此处用于动态创建`<input type="file">`元素。 - `removeChild`：移除指定的子节点，用于删除已选择的附件。 3. **变量管理**： - `i` 作为计数器，用于生成唯一ID，如`_attachment0`、`_attachment1`等。 - `findAttachment` 函数检查附件是否已经存在于列表中，避免重复添加。 4. **文件名提取**： - `extractFileName` 函数通过字符串处理从文件路径中提取出文件名，使用`substr`和`lastIndexOf`方法。 5. **样式控制**： - 使用CSS样式`display:none`和`display:`来控制附件列表和按钮的可见性。 6. **动态生成表单元素**： - 因为`<input type="file">`的`value`属性是只读的，无法直接设置，所以通过JavaScript动态生成新的`<input type="file">`元素，并设置`onchange`事件监听器。 7. **限制与扩展**： - 代码指出，仅使用一个`<input type="file">`控件不足以满足文件上传需求，因为用户无法重复选择同一文件（除非删除后再选）。 - 客户端无法直接获取文件大小，除非使用特定的技术如FSO（FileSystemObject，仅限于IE）或ActiveX控件，或者通过Flash与JavaScript交互。 - 提及了使用Flash获取客户端文件大小的变通方法，但现在Flash的安全限制可能使得这种方法不可行。 8. **用户交互**： - 用户可以选择多个文件，通过添加新的`<input type="file">`控件实现。 - 用户可以通过点击“删除”链接移除已选择的附件。 9. **功能优化**： - 代码注释表示作者计划在未来版本中增加显示附件大小的功能。 10. **代码组织**： - 函数命名遵循了一种描述性的命名约定，如`addAttachmentToList`、`selectAttachment`，便于理解代码功能。 这个示例代码对于学习JavaScript事件处理、DOM操作和文件上传的实现非常有用。不过，实际应用中，通常会使用更复杂、更安全的解决方案，如使用Ajax进行异步上传，以及现代浏览器支持的File API来获取文件信息。