要在EXT.js中实现上传文件功能，可以使用Ext.form.Panel和Ext.form.field.File组件。具体步骤如下：
1. 创建一个Ext.form.Panel组件，设置属性和方法。
```javascript
var formPanel = Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
width: 400,
height: 150,
title: '上传文件',
bodyPadding: 10,
frame: true,
url: 'upload.php', //上传文件处理的URL
method: 'POST', //上传文件的方式
items: [{
xtype: 'filefield', //上传文件的组件
name: 'file', //上传文件的参数名
fieldLabel: '选择文件',
labelWidth: 70,
msgTarget: 'side',
allowBlank: false,
buttonText: '浏览...'
}],
buttons: [{
text: '上传',
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
success: function(form, action) {
Ext.Msg.alert('成功', action.result.msg);
},
failure: function(form, action) {
Ext.Msg.alert('失败', action.result.msg);
}
});
}
}
}]
});
```
2. 创建一个Ext.form.field.File组件，用于选择要上传的文件。
```javascript
{
xtype: 'filefield',
name: 'file',
fieldLabel: '选择文件',
labelWidth: 70,
msgTarget: 'side', //错误提示的位置
allowBlank: false, //是否允许为空
buttonText: '浏览...' //选择文件按钮的文本
}
```
3. 在表单中添加按钮，用于提交表单数据。
```javascript
{
xtype: 'button',
text: '上传',
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) { //验证表单是否合法
form.submit({ //提交表单数据
success: function(form, action) {
Ext.Msg.alert('成功', action.result.msg);
},
failure: function(form, action) {
Ext.Msg.alert('失败', action.result.msg);
}
});
}
}
}
```
4. 在服务端处理上传文件。
在上面的代码中，上传文件处理的URL为'upload.php'，需要在该文件中处理上传的文件，将文件保存到服务器上。具体代码如下：
```php
<?php
$targetDir = "uploads/"; //上传文件保存的目录
$targetFile = $targetDir . basename($_FILES["file"]["name"]); //上传文件的路径
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($targetFile,PATHINFO_EXTENSION)); //文件类型
//检查文件是否已经存在
if (file_exists($targetFile)) {
echo json_encode(array('msg' => '文件已经存在'));
$uploadOk = 0;
}
//检查文件大小
if ($_FILES["file"]["size"] > 5000000) { // 5MB
echo json_encode(array('msg' => '文件太大'));
$uploadOk = 0;
}
//检查文件类型
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
echo json_encode(array('msg' => '只允许上传jpg、png、jpeg和gif格式的文件'));
$uploadOk = 0;
}
//上传文件
if ($uploadOk == 0) {
echo json_encode(array('msg' => '上传失败'));
} else {
if (move_uploaded_file($_FILES["file"]["tmp_name"], $targetFile)) {
echo json_encode(array('msg' => '文件上传成功'));
} else {
echo json_encode(array('msg' => '上传失败'));
}
}
?>
```
以上就是在EXT.js中实现上传文件功能的步骤。
JavaScript Jabber Messenger
3560
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
