extjs3 上传文件
时间: 2024-02-10 19:08:58 浏览: 89
EXt3 的文件上传
5星 · 资源好评率100%
在extjs3中上传文件需要引入两个扩展文件:FileUploadField.js和fileuploadfield.css。这两个文件可以在extjs3包中的examples/form目录下找到。
以下是一个示例代码,演示了如何在extjs3中上传文件:
```javascript
// 引入扩展文件
<script type='text/javascript' src='<%=request.getContextPath()%>/ext/extjs/ux/FileUploadField.js'></script>
<link rel="stylesheet" type="text/css" href='<%=request.getContextPath()%>/ext/extjs/ux/css/fileuploadfield.css'/>
// 创建一个表单面板
var formPanel = new Ext.FormPanel({
renderTo: 'form-container', // 表单渲染的容器
fileUpload: true, // 开启文件上传功能
items: [{
xtype: 'fileuploadfield', // 使用文件上传字段
fieldLabel: '选择文件',
name: 'file', // 文件字段的名称
buttonText: '浏览', // 选择文件按钮的文本
allowBlank: false // 是否允许为空
}],
buttons: [{
text: '上传',
handler: function() {
if (formPanel.getForm().isValid()) {
formPanel.getForm().submit({
url: 'upload.php', // 上传文件的后端处理脚本
waitMsg: '正在上传文件...',
success: function(form, action) {
Ext.Msg.alert('成功', '文件上传成功!');
},
failure: function(form, action) {
Ext.Msg.alert('失败', '文件上传失败!');
}
});
}
}
}]
});
```
请注意,上述示例中的`upload.php`是一个后端处理脚本,用于接收并处理上传的文件。你需要根据自己的需求来编写这个脚本。
阅读全文