extjs带进度条的多文件上传和图片预览

ExtJS 是一个用于构建富客户端应用程序的 JavaScript 框架。它提供了丰富的 UI 组件和数据管理功能，非常适合用于开发复杂的 Web 应用程序。下面我将详细介绍如何在 ExtJS 中实现带进度条的多文件上传和图片预览功能。

基础概念

多文件上传：允许用户同时选择并上传多个文件。 进度条：显示上传过程的进度，提供用户反馈。 图片预览：在上传之前或上传过程中显示图片的缩略图。

类型

客户端预览：在文件选择后立即在浏览器中显示图片预览。
服务器端预览：文件上传到服务器后，服务器生成预览图并返回给客户端。

应用场景

社交媒体平台：用户上传多张图片到社交网络。
电子商务网站：用户上传产品图片。
内容管理系统：管理员批量上传媒体文件。

实现步骤

1. 设置文件上传组件

首先，你需要一个文件上传组件。ExtJS 提供了 Ext.form.field.File 组件来实现这一点。

Ext.create('Ext.form.Panel', {
    title: 'File Upload Form',
    width: 400,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'filefield',
        name: 'file',
        fieldLabel: 'File',
        labelWidth: 50,
        msgTarget: 'side',
        allowBlank: false,
        anchor: '100%',
        buttonText: 'Select Files',
        multiple: true // 允许多文件上传
    }, {
        xtype: 'button',
        text: 'Upload',
        handler: function() {
            var form = this.up('form').getForm();
            if (form.isValid()) {
                form.submit({
                    url: 'upload.php', // 服务器端处理上传的脚本
                    waitMsg: 'Uploading your files...',
                    progress: true,
                    success: function(form, action) {
                        Ext.Msg.alert('Success', 'Files uploaded successfully');
                    },
                    failure: function(form, action) {
                        Ext.Msg.alert('Failed', 'Upload failed');
                    }
                });
            }
        }
    }]
});

2. 添加进度条

在上面的代码中，progress: true 已经启用了进度条功能。ExtJS 会自动处理上传进度的显示。

3. 实现图片预览

为了实现图片预览，你可以监听文件选择事件，并使用 FileReader API 来读取文件并在页面上显示预览。

{
    xtype: 'filefield',
    name: 'file',
    fieldLabel: 'File',
    labelWidth: 50,
    msgTarget: 'side',
    allowBlank: false,
    anchor: '100%',
    buttonText: 'Select Files',
    multiple: true,
    listeners: {
        change: function(field, value) {
            var files = field.fileInputEl.dom.files;
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                if (file.type.match('image.*')) {
                    var reader = new FileReader();
                    reader.onload = (function(theFile) {
                        return function(e) {
                            var img = Ext.create('Ext.Img', {
                                src: e.target.result,
                                width: 100,
                                height: 100,
                                margin: '5 5 5 5'
                            });
                            Ext.getCmp('previewPanel').add(img);
                        };
                    })(file);
                    reader.readAsDataURL(file);
                }
            }
        }
    }
}

在这个例子中，我们创建了一个 previewPanel 来显示预览图片。