jQuery实现不苛刻的多文件上传

"15天学会jQuery(10-15)教程主要涵盖了使用jQuery实现多文件上传功能，强调了易用性和非苛刻的JavaScript代码的重要性。教程通过两个不同的方法来提升用户体验，同时确保在JavaScript禁用时仍能上传多个文件。" 在15天学会jQuery的系列教程中，第11天的主题是使用不严格的JavaScript代码实现多文件上传。这个话题源于作者在探索AJAX时遇到的问题，即如何在一个单文件输入元素中实现多文件上传。作者发现了一个创新的解决方案，并决定在jQuery教程中分享这一技术。 教程的第一个重点是如何创建一个友好且功能丰富的多文件上传界面，而无需牺牲易用性。这通常意味着即使用户禁用了JavaScript，网站的核心功能也应能正常工作。为了实现这一目标，教程介绍了两种方法： 1. **单文件输入元素实现多文件上传**：在这个方法中，jQuery被用来监听文件输入框的onChange事件。当用户选择文件后，jQuery动态创建一个新的div元素来显示已选择的文件列表，同时检查是否达到最大允许上传的数量。这样做可以提供一个直观的用户界面，但仍然依赖于JavaScript。 2. **多文件输入元素实现非苛刻的多文件上传**：这种方法采用多个文件输入元素，通过jQuery将它们隐藏并统一展示，这样即使JavaScript被禁用，用户仍能通过HTML表单提交多个文件。这种方式提高了可用性，因为没有JavaScript的用户也可以上传多个文件，尽管界面可能不如JavaScript启用时那样直观。 演示提供了实际操作的例子，帮助读者更好地理解和应用这些技术。演示一展示了如何使用jQuery将单个文件输入框转化为多文件上传体验；而演示二则利用多个隐藏的文件输入元素，确保在JavaScript禁用的情况下仍能进行多文件上传，尽管原始的演示存在bug，但作者已经修正并提供了修复后的链接。 教程的目的是让开发者理解如何在实现复杂功能的同时保持良好的用户体验和兼容性。通过学习这些技巧，开发者可以创建更高效、更具适应性的文件上传功能，提高网站的可用性和用户满意度。