1.0版QQ邮箱风格JavaScript附件上传代码示例及注意事项

本文档提供了一个类似于QQ邮箱的JavaScript附件上传源代码示例，用于实现一个简单的文件上传功能。作者Aquaqin分享了HTML和JavaScript代码片段，用于创建一个用户可以选择文件并将其添加到附件列表中的功能。以下是一些关键知识点： 1. **技术实现**: - 由于`<input type="file">`在IE浏览器中不能直接修改`type`属性，代码采用了`insertAdjacentHTML`方法来动态插入HTML代码，以创建文件输入控件。 - `value`属性是只读的，不能直接设置，这意味着用户选择的文件名只能通过事件处理程序获取。 2. **用户体验优化**: - 作者注意到了一个问题：同一个文件多次上传时，由于`<input type="file">`的局限性，删除最后一次添加的文件后再次添加会导致`onchange`事件不触发。因此，代码中有一个计数器`i`来区分不同的文件，同时提供了删除按钮功能。 3. **文件大小显示**: - 客户端直接获取文件大小是有限制的，可能需要借助如FSO（File System Object）或ActiveX技术，但这些方法在某些环境下可能不可用。另一种方法是利用Flash与JavaScript交互，但这可能会受到现代浏览器安全策略的限制。 4. **代码结构**: - 代码中定义了全局变量`vari=0`，用于生成唯一的ID给每个附件。`addAttachmentToList`函数负责处理文件选择和附件列表的更新，包括创建新的`<span>`元素显示文件名和提供删除链接。 5. **资源来源**: - 作者的技术博客链接是<http://blog.csdn.net/aquadp/>，有兴趣学习者可以在此查找更多相关教程和更新。 6. **版本控制**: - 文档提到当前版本为1.0，作者表示未来会进行改进，可能增加显示文件大小的功能或其他增强功能，并鼓励读者提出反馈和改进建议。 这个源代码片段对于学习JavaScript文件上传和前端开发中如何处理用户上传的文件非常有帮助，特别是对新手来说，它提供了一个实用的参考示例。同时，它还展示了开发者如何处理常见的浏览器兼容性和用户体验问题。