ExtJS4.2实现图片与文件上传功能指南

根据给定的文件信息，我们可以梳理出关于ExtJS 4.2在进行文件上传功能开发方面的几个关键知识点： 1. 文件拖拽上传：ExtJS 4.2 提供了拖放API，允许用户通过拖拽的方式将文件从桌面直接拖拽到浏览器中指定的上传区域。开发时，需要配置`dragAndDrop`为`true`在文件上传组件，并通过监听`drop`事件处理文件的读取和上传操作。 2. 本地预览：在文件上传前允许用户预览本地文件，对于提高用户体验至关重要。这通常涉及到监听`change`事件，使用HTML5的FileReader API来读取文件内容，并将其显示在一个`<img>`标签或者预览画布中。 3. 多文件上传：ExtJS 4.2的文件上传组件支持`multiple`属性，用户可以一次性选择多个文件进行上传。前端实现此功能需要确保组件正确配置，并通过监听选择文件后的事件来处理文件数组。 4. 显示文件详细信息：上传前通常需要显示文件的名称、大小、类型等详细信息。这可以通过分析`File`对象的属性来获取，并展示在界面上，为用户提供选择上传或取消上传文件的依据。 5. 显示上传进度：为了提供反馈，显示文件上传进度是重要的功能。ExtJS 4.2的文件上传组件可以通过监听`uploadprogress`事件来实现这一功能。该事件提供了`loaded`和`total`参数，可以用来计算并更新进度条的显示。 6. 等比例缩放图片：在上传图片时，如果要保证图片质量同时避免影响页面布局，通常需要等比例缩放图片到合适的尺寸。可以通过图片处理库来实现这一功能，比如使用JavaScript库来获取图片尺寸，并按照指定比例进行缩放。 7. 图片旋转：在某些应用场景中，用户可能需要上传图片前对图片进行旋转处理。这可以通过JavaScript使用Canvas API来实现。用户可以自定义旋转角度，系统将根据用户的选择来旋转图片。 8. 图片导航：对于多图片上传的场景，图片导航允许用户浏览和管理已经选择的图片。开发时，需要在界面上创建一个缩略图列表，并通过事件监听来实现图片的选择、删除和顺序调整等功能。 【标签】中提到的“extjs 文件上传 图片上传 相册”，则是对以上知识点的概括。使用ExtJS 4.2实现文件上传时，可以将这些功能整合进一个相册上传组件，使得上传过程既直观又高效。 【压缩包子文件的文件名称列表】中只包含一个词“album”，这表明我们讨论的组件可能被命名为“album”（相册），并且这个文件名称可能暗示了一个特定功能的模块或者是压缩文件中的一个主要文件。对于开发来说，理解它指的是整个文件上传组件还是其中的某个部分是很重要的，这有助于我们在项目中组织和引用相关的代码或资源。