HTML5 文件选择：input 元素和拖放

选择文件可以通过两种不同的 HTML5 元素实现：'input' 元素和 'drag-and-drop' 元素。

1. 使用 'input' 元素：

   • 创建一个 'input' 元素，并将其 'type' 属性设置为 'file'。
   • 可以选择添加 'accept' 属性，用于限制可以选择的文件类型。
   • 可以选择添加 'multiple' 属性，允许选择多个文件。
   • 当用户单击该元素时，系统会打开文件选择对话框，用户可以在对话框中选择文件。
   • 选择的文件将被提交到服务器，并可以在后台进行处理。

2. 使用 'drag-and-drop' 元素：

   • 创建一个 'div' 元素，并使用 CSS 样式将其设置为可拖放区域。
   • 监听 'div' 元素的 'dragover' 和 'drop' 事件。
   • 在 'dragover' 事件中，阻止默认行为以允许文件拖放。
   • 在 'drop' 事件中，获取拖放的文件列表。
   • 可以选择验证和处理拖放的文件。
   • 选择的文件将被提交到服务器，并可以在后台进行处理。

以上两种方式都可以实现选择文件的功能，选择的文件可以在后台进行处理或上传到服务器。具体选择哪种方式取决于实际需求和设计。