extjs 批量图片上传
时间: 2023-07-26 10:35:30 浏览: 64
要实现批量图片上传,你可以使用 `Ext.form.field.File` 组件的 `multiple` 属性,允许用户选择多个文件。例如:
```
Ext.create('Ext.form.Panel', {
title: 'Upload Images',
renderTo: Ext.getBody(),
items: [{
xtype: 'filefield',
name: 'photos',
fieldLabel: 'Photos',
labelWidth: 50,
msgTarget: 'side',
allowBlank: false,
anchor: '100%',
buttonText: 'Select Photos...',
multiple: true
}],
buttons: [{
text: 'Upload',
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
url: '/upload/images',
waitMsg: 'Uploading your photos...',
success: function(form, action) {
Ext.Msg.alert('Success', action.result.message);
},
failure: function(form, action) {
Ext.Msg.alert('Failed', action.result.message);
}
});
}
}
}]
});
```
在上面的代码中,`multiple` 属性被设置为 `true`,允许用户选择多个文件。在提交表单时,`Ext.form.Panel` 组件会将所有选择的文件一起上传到后台接口,你需要在后台接口中处理这些文件,并返回上传结果。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)