HTML5上传组件：JS实现多文件选择、大小限制与MD5校验

"该资源提供了一个完整的js HTML5上传示例代码，旨在解决不兼容Flash插件的问题，以及实现多文件选择、自定义参数提交、文件大小和数量限制、MD5校验、服务器反馈信息展示、上传顺序控制和多视图切换等功能。此上传组件基于CFUpdate 0.8.2 Base，适用于支持HTML5的浏览器，包括IE9+、Firefox、Chrome、Opera、Safari，以及触摸设备如iPhone 4、iPad 2和Android 2.1及以上版本。" 在HTML5上传功能中，一个关键的改进是利用`<input type="file">`元素的新特性，例如`multiple`属性允许用户选择多个文件进行上传。此外，HTML5的File API提供了读取、操作和上传文件的能力，如通过`FileReader`对象计算文件的MD5值，用于校验文件的完整性。 在示例代码中，`CFUpdate.min.js`是核心组件脚本，通过在HTML页面中引入该脚本来启用上传功能。`<div id="cfupdate"></div>`是一个容器元素，用于放置上传组件。配置参数通常在`Config.js`文件中定义，包括上传组件的标题、表单字段名、服务器端处理脚本URL、提交参数、允许的文件类型、文件总容量限制等。 以下是一些关键配置参数的解释： - `title`: 设置上传组件的标题，用于用户界面。 - `FormName`: 指定用于传递文件数据的表单字段名。 - `url`: 服务器端接收文件的处理程序地址，通常是PHP、ASP.NET或其他后端语言的脚本。 - `parameter`: 可选的GET参数，用于传递额外信息到服务器。 - `typefile`: 允许上传的文件类型列表，以分号分隔。 - `UpSize`: 限制总的上传文件大小，如果设为0或负数，则表示无限制。 为了实现文件大小和数量限制，可以在JavaScript中添加逻辑来检查用户选择的文件是否超过设定的限制。同时，通过监听`change`事件，可以实时更新文件列表，并显示相关信息给用户。 服务器反馈信息展示通常涉及在前端显示来自服务器的响应，例如成功上传、错误信息等。这可以通过监听XMLHttpRequest对象的`onreadystatechange`事件并解析返回的JSON或XML数据来实现。 至于上传顺序控制，可以维护一个队列并在用户触发上传时按顺序处理。多视图切换则可能涉及到UI设计，通过切换不同的展示模式，如列表、缩略图等，来增强用户体验。 这个js HTML5上传示例代码提供了一套完整的解决方案，覆盖了现代Web应用中文件上传的多种需求，对于开发者来说是一个有价值的参考资料。