ExtJs中图片选择后切换及预览实现方案咨询

Hey there! Let’s break down your two ExtJS questions with practical, working examples— I’ve dealt with these exact scenarios in projects before, so this should get you sorted.

1. Implementing Image Switch After Selection #

The core idea here is to listen for when a user selects a new image via FileUploadField, read the local file, and update an existing image component's source to the new file data.

Here's a step-by-step implementation:

• First, define your FileUploadField and an Ext.Img component to display the image.
• Attach a change listener to the file field to capture the selected file.
• Use the browser's FileReader API to convert the file into a data URL, then set that as the image's src.

// Create the image display component
var imageViewer = Ext.create('Ext.Img', {
    id: 'imageViewer',
    width: 300,
    height: 300,
    src: 'default-image.jpg', // Default placeholder image
    style: 'border: 1px solid #ccc;'
});

// Create the file upload field
Ext.create('Ext.form.field.File', {
    renderTo: Ext.getBody(),
    fieldLabel: 'Select Image',
    name: 'imageFile',
    buttonText: 'Browse',
    listeners: {
        change: function(field, newValue, oldValue) {
            var file = field.fileInputEl.dom.files[0];
            if (file && file.type.match('image.*')) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    // Update the image component's source with the data URL
                    Ext.getCmp('imageViewer').setSrc(e.target.result);
                };
                reader.readAsDataURL(file);
            } else {
                Ext.Msg.alert('Error', 'Please select a valid image file!');
                // Reset the field if invalid
                field.reset();
            }
        }
    }
});

// Add the image viewer to the page
imageViewer.render(Ext.getBody());

Key notes:

• We check if the selected file is an image using file.type.match('image.*') to avoid non-image files.
• If the user selects an invalid file, we show an alert and reset the field.
• The FileReader API is supported in all modern browsers, so this should work reliably.

2. Displaying Image Preview at a Specific Position in a Form #

To add a preview to your form, you just need to include the Ext.Img component in your form's layout at the desired position, then reuse the same file reading logic from the first example.

Here's how to integrate it into a form panel:

Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    title: 'Image Upload Form',
    width: 500,
    bodyPadding: 10,
    items: [
        {
            xtype: 'filefield',
            fieldLabel: 'Choose Image',
            name: 'uploadedImage',
            buttonText: 'Select Image',
            listeners: {
                change: function(field) {
                    var file = field.fileInputEl.dom.files[0];
                    var previewImg = this.up('form').down('#imagePreview');
                    
                    if (file && file.type.match('image.*')) {
                        var reader = new FileReader();
                        reader.onload = function(e) {
                            previewImg.setSrc(e.target.result);
                            previewImg.show(); // Show if it was hidden initially
                        };
                        reader.readAsDataURL(file);
                    } else {
                        Ext.Msg.alert('Invalid File', 'Only image files are allowed!');
                        field.reset();
                        previewImg.hide(); // Hide preview if invalid
                    }
                }
            }
        },
        // This is your preview image, placed right after the file field
        {
            xtype: 'image',
            id: 'imagePreview',
            width: 200,
            height: 200,
            hidden: true, // Start hidden until an image is selected
            style: 'margin: 10px 0; border: 1px dashed #aaa;'
        },
        // Other form fields go here
        {
            xtype: 'textfield',
            fieldLabel: 'Image Description',
            name: 'imageDesc'
        }
    ],
    buttons: [
        {
            text: 'Submit',
            handler: function() {
                // Handle form submission logic here
                var form = this.up('form').getForm();
                if (form.isValid()) {
                    form.submit({
                        url: 'your-upload-url.php',
                        success: function(form, action) {
                            Ext.Msg.alert('Success', action.result.message);
                        },
                        failure: function(form, action) {
                            Ext.Msg.alert('Failure', action.result.message);
                        }
                    });
                }
            }
        }
    ]
});

Key points for form integration:

• The image component is added directly to the form's items array, so you can place it anywhere in your form layout (e.g., next to the file field, below it, etc.).
• We start with the preview hidden (hidden: true) and show it only when a valid image is selected.
• Using this.up('form').down('#imagePreview') lets us easily reference the preview component from the file field's listener.

内容的提问来源于stack exchange，提问作者Victor Velasco