xtJS 4 有一个非常方便的文件上传组件，可以用来将文件上传到服务器。本文PHP教程UncleToo将介绍使用PHP和ExtJS实现文件上传功能。
首先，创建文件上传组件Ext.form.Panel，并添加一个上传按钮及按钮单击事件，该事件将验证并提交表单到upload.php的文件。看下面代码：
ExtJS部分
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
Ext.onReady(function () {
Ext.widget('form', {
title: 'Upload Demo',
width: 400,
bodyPadding: 10,
items: [{
xtype: 'filefield',
name: 'file',
fieldLabel: 'File',
labelWidth: 50,
anchor: '100%',
buttonText: 'Select File...'
}],
buttons: [{
text: 'Upload',
handler: function () {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
url: '/extjs-tutorials/upload.php',
waitMsg: 'Uploading your file...',
success: function (f, a) {
var result = a.result, data = result.data,
name = data.name, size = data.size,
message = Ext.String.format('<b>Message:</b> {0}<br>' +
'<b>FileName:</b> {1}<br>' +
'<b>FileSize:</b> {2}',
result.msg, name, size);
Ext.Msg.alert('Success', message);
},
failure: function (f, a) {
Ext.Msg.alert('Failure', a.result.msg);
}
});
}
}
}],
renderTo: 'output'
});
}); |
效果预览：
Upload.php文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<?phpif ($_FILES["file"]["error"] > 0)
{ $error = $_FILES["file"]["error"];
$response = array('success' => false, 'msg' => $error);
echo json_encode($response);
}else{ $file_name = $_FILES["file"]["name"];
$file_type = $_FILES["file"]["type"];
$file_size = round($_FILES["file"]["size"] / 1024, 2) . " Kilo Bytes";
$response = array('success' => true,
'data' => array('name' => $file_name, 'size' => $file_size),
'msg' => 'File Uploaded successfully'
);
echo json_encode($response);
}?> |
选择要上传的文件，并点击上传按钮，效果如下：