如何在Extjs 4.2+中预览图片再上传

在Extjs 4.2+中预览图片再上传，可以通过以下步骤实现：

1. 创建一个文件上传组件： Ext.create('Ext.form.Panel', { renderTo: Ext.getBody(), width: 400, bodyPadding: 10, frame: true, items: [{ xtype: 'filefield', name: 'photo', fieldLabel: '选择图片', labelWidth: 70, msgTarget: 'side', allowBlank: false, buttonText: '浏览...' }], buttons: [{ text: '上传', handler: function() { var form = this.up('form').getForm(); if (form.isValid()) { form.submit({ url: 'upload.php', // 上传图片的后台处理文件 waitMsg: '正在上传...', success: function(fp, o) { Ext.Msg.alert('成功', '图片上传成功！'); }, failure: function(fp, o) { Ext.Msg.alert('失败', '图片上传失败！'); } }); } } }] });
2. 添加一个图片预览功能： Ext.create('Ext.form.Panel', { renderTo: Ext.getBody(), width: 400, bodyPadding: 10, frame: true, items: [{ xtype: 'filefield', name: 'photo', fieldLabel: '选择图片', labelWidth: 70, msgTarget: 'side', allowBlank: false, buttonText: '浏览...', listeners: { change: function(field, value) { var form = this.up('form').getForm(); var file = field.fileInputEl.dom.files[0]; var reader = new FileReader(); reader.onload = function(e) { var img = Ext.ComponentQuery.query('image')[0]; img.setSrc(e.target.result); }; reader.readAsDataURL(file); } } }, { xtype: 'image', width: 200, height: 200, src: 'default.jpg' // 默认图片路径 }], buttons: [{ text: '上传', handler: function() { var form = this.up('form').getForm(); if (form.isValid()) { form.submit({ url: 'upload.php', // 上传图片的后台处理文件 waitMsg: '正在上传...', success: function(fp, o) { Ext.Msg.alert('成功', '图片上传成功！'); }, failure: function(fp, o) { Ext.Msg.alert('失败', '图片上传失败！'); } }); } } }] });

以上代码示例中，我们创建了一个Ext.form.Panel，其中包含一个文件上传组件和一个图片预览组件。当用户选择图片后，通过FileReader读取图片文件，并将读取到的图片数据设置给图片预览组件的src属性，从而实现图片预览的效果。用户点击上传按钮后，将表单数据提交到后台处理文件进行上传。

推荐的腾讯云相关产品：腾讯云对象存储（COS） 腾讯云对象存储（COS）是一种海量、安全、低成本、高可靠的云存储服务，适用于各类网站、开发企业和个人开发者的数据存储、备份、归档和分发。您可以通过腾讯云COS提供的API进行文件的上传、下载、删除等操作，同时还可以设置访问权限、进行数据加密等操作，确保数据的安全性和可靠性。

更多关于腾讯云对象存储（COS）的信息，请访问：腾讯云对象存储（COS）