如何实现点击一个漂亮的按钮来触发上传框的点击事件，下面是我实现的代码，关键代码是：fs2.getComponent(2).getEl().dom.click(); 但是在FF下不可行。
var fs2 = new Ext.form.FieldSet({
title : "个人照片",
width : 200,
height : 360,
items : [{
border : false,
html : "<img src='" + basePath + "/upload/default.jpg' width='180'/>"
}, {
xtype : "hidden",
name : "photostr"
}, {
xtype : "textfield",
inputType : "file",
name : "photo",
fieldLabel : "上传照片",
hideLabel : true,
hidden : true
}],
buttonAlign : "center",
buttons : [{
text : "改变照片",
handler : function(el) {
// 存在的缺陷：ff下不好使。
fs2.getComponent(2).getEl().dom.click();
fs2.getComponent(0).body.dom.childNodes[0].src = fp.getForm()
.findField("photo").getValue();
}
}]
});
添加评论
关注(0)
相关推荐
1. **UI元素**：`Ext.form.FileField`创建一个输入字段，通常显示为"浏览..."按钮，用户可以通过它来选择本地文件。 2. **事件监听**：可以监听`change`事件，当用户选择文件后触发，通常用于执行预览或验证操作。 ...
EXT.ux.UploadDialog是EXT扩展库中的一个插件，它提供了一种对话框式的界面，用于处理文件上传，特别是图片文件的批量操作。 EXT库的核心在于其组件模型，通过各种预定义的组件（如表格、表单、树形视图等）可以...
本篇文章将聚焦于"Ext上传文件例子(入门)"，通过一个简单的实例来讲解如何在ExtJS框架下实现文件上传功能。 首先，我们要理解文件上传的基本原理。在Web应用中，文件上传通常依赖于HTML的`<input type="file">`元素...
总结来说，实现Ext 3.x中的文件批量上传涉及到创建一个包含`FileUploadField`的表单，监听用户的选择并触发上传，同时通过自定义CSS和JavaScript代码来优化用户体验。在实际应用中，还需要考虑服务器端的处理逻辑，...
在上述代码中，我们创建了一个表单，包含一个文本字段用于显示文件名，一个FileUploadField供用户选择文件，以及一个按钮触发上传操作。`handler="uploadFile"`属性指定了按钮点击时执行的函数。 接下来，我们需要...
在EXT中，可以添加一个删除按钮，点击时触发一个请求到PHP，请求携带图片的唯一标识。PHP端根据这个标识找到对应的图片文件并删除。完成后，前端接收到确认信号，从视图中移除对应的Image组件。 5. **安全考虑** ...
总的来说，通过AjaxUpload和jQuery，我们可以实现一个用户友好的图片上传功能，使得用户只需点击一个按钮就能完成图片选取和上传，无需展示传统的文件选择对话框，提升了用户体验。同时，C#后端处理则确保了文件上传...
对话框通常包含一个文件选择器，允许用户选择一个或多个文件，以及一个提交按钮来触发实际的上传过程。 UploadDialog.js可能包含以下关键功能： 1. **文件选择**：用户可以通过内置的HTML5 `<input type="file">` ...
通过 `upload_Ext` 示例，开发者可以学习到如何在 ExtJS 应用中实现一个完整的文件上传功能，从而提升 Web 应用的交互性和实用性。同时，这个过程也会涉及到前后端的协作，以及如何优化用户体验，这些都是现代 Web ...
总结，重写Ext JS的Panel并添加click事件是一个常见的需求，通过继承Panel并使用事件监听机制，我们可以轻松实现这一功能。这不仅增强了Panel的功能，也使我们的应用更加灵活和可定制。记得在编写代码时，根据实际...
"Ext Ajax 上传文件"这个主题涉及到的是使用Ext JS框架中的Ajax组件来实现文件的上传功能。Ext JS是一个强大的JavaScript库，专门用于构建富客户端应用程序，它提供了一系列丰富的UI组件和强大的数据管理工具。 ...
- `Ext.form.Action.Submit`：当用户选择文件并触发提交操作时，`FormPanel`会触发一个`submit`动作，将文件数据发送到服务器。 2. **异步上传**： - `Ajax上传`：`Ext`支持使用Ajax进行文件上传，这意味着文件...
EXTJS可以提供一个下载按钮，当用户点击时触发AJAX请求，服务器返回文件流，然后在前端利用HTML5的`Blob`对象和`URL.createObjectURL`方法创建一个临时链接，让用户下载。你可能需要在服务器端使用合适的MIME类型，...
例如，当用户点击下载按钮时，服务器返回一个文件的URL，然后EXTJS可以创建一个`<a>`标签指向该URL并触发下载。 ```javascript function downloadFile(url) { var link = document.createElement('a'); link.href...
EXT提供了一个组件叫做`Ext.form.FileField`（也被称为“上传字段”），用于在表单中实现文件上传功能，特别是图片。 **EXT图片上传的工作原理** EXT图片上传的核心是HTML5的`<input type="file">`元素，它允许...
这个源码例子是基于Java和Ext JS实现的一个增强版本，特别加入了图片上传功能，使得用户可以在编辑器中直接插入并管理图片。下面将详细探讨相关知识点。 1. **HTML编辑器** HTML编辑器是网页开发中的重要工具，它...
要创建一个HtmlEditor实例，我们需要在ExtJS的代码中调用`Ext.create('Ext.form.field.HtmlEditor')`，并传入相应的配置项，例如宽度、高度、工具栏配置等。 对于图片上传功能，通常需要后端支持。在前端，我们可以...
"UploadDialog"是EXTjs中的一个扩展（Extension），它为用户提供了一个集成的文件上传对话框功能。这个"Ext.ux.UploadDialog.zip"压缩包包含了EXTjs的UploadDialog组件，方便开发者在自己的项目中直接使用。 ...
Ext.ux.UploadDialog是Ext JS库的一个扩展组件，主要用于实现用户友好的文件上传对话框。这个组件在Web应用中非常实用，特别是在需要处理大量文件上传或者需要用户交互确认的场景下。下面我们将深入探讨`ext.ux....
在用户触发删除操作时，例如点击一个删除按钮，可以捕获事件并发送一个包含图片ID或URL的Ajax请求到服务器。服务器端接收到请求后，会根据提供的信息从数据库或文件系统中删除相应的图片。返回成功的响应后，客户端...