extjs3.4 批量图片上传
时间: 2024-03-12 12:46:50 浏览: 16
在 ExtJS 3.4 中实现批量图片上传可以通过以下步骤:
1. 创建一个文件上传表单
可以使用 Ext.form.Panel 组件创建一个包含文件上传字段的表单,例如:
```
var formPanel = new Ext.form.Panel({
renderTo: 'upload-form',
fileUpload: true,
items: [{
xtype: 'filefield',
name: 'image',
fieldLabel: 'Select an image',
labelWidth: 100,
allowBlank: false,
buttonText: 'Browse...'
}]
});
```
2. 处理上传请求
在表单提交时,需要处理上传请求并将文件发送到服务器。可以使用 Ext.form.action.Submit 类来处理请求,例如:
```
formPanel.getForm().submit({
url: 'upload.php', // 上传文件的服务器端处理脚本
waitMsg: 'Uploading your image...',
success: function(form, action) {
Ext.Msg.alert('Success', 'Your image was uploaded successfully.');
},
failure: function(form, action) {
Ext.Msg.alert('Failed', action.result.msg);
}
});
```
其中,url 参数为上传文件的服务器端处理脚本地址,waitMsg 参数为上传过程中显示的等待消息,success 和 failure 分别为上传成功和失败时的回调函数。
3. 处理上传文件
在服务器端处理上传文件时,可以使用 PHP、Java、Node.js 等语言和框架来实现。以下是一个 PHP 的示例代码:
```
<?php
$uploadDir = 'uploads/';
$uploadFile = $uploadDir . basename($_FILES['image']['name']);
if (move_uploaded_file($_FILES['image']['tmp_name'], $uploadFile)) {
echo json_encode(array('success' => true));
} else {
echo json_encode(array('success' => false, 'msg' => 'Failed to upload image.'));
}
?>
```
其中,$uploadDir 为上传文件保存的目录,$uploadFile 为上传文件的完整路径。move_uploaded_file 函数用于将上传的临时文件移动到目标位置。最后,使用 json_encode 函数将上传结果以 JSON 格式返回给客户端。