ExtJS中有封装好的组件来实现文件上传功能,用起来可谓是非常之方便,但是对于很多ExtJS新手来说不知道如何控制文件的上传类型,比如当我们只想让用户上传‘txt’类型的文件时,怎样能够实现当用户上传非‘txt’文件时,给出错误提示呢?对于如何验证文件类型,使用field组件的validator验证器应该是一种较为方便的方法。
在 ExtJS4.x 如何实现密码验证功能一篇文章中我们曾使用过validator对密码进行验证,今天我们借文件上传功能的实现,给大家详细的分享一下validator的用法。首先给出实现文件上传功能的代码:
PHP(uploadFile.php)后台代码:
实现效果图:
在 ExtJS4.x 如何实现密码验证功能一篇文章中我们曾使用过validator对密码进行验证,今天我们借文件上传功能的实现,给大家详细的分享一下validator的用法。首先给出实现文件上传功能的代码:
JS代码:
Ext.application({
name: 'Demo',
appFolder: 'app',
launch: function(){
Ext.create('Ext.container.Viewport', {
margin:'100 0 0 200',
items:[{
xtype: 'form',
title: 'ExtJS 文件上传',
width: 400,
height: 300,
defaults: {
margin: '20 0 0 30',
},
items: [{
xtype: 'filefield',
name: 'file',
fieldLabel: '上传文件',
buttonText: '选择文件',
labelWidth: 80,
width: 300,
allowBlank: false,
msgTarget: 'under',
validator: function(value){
var arr = value.split('.');
if(arr[arr.length-1] != 'txt'){
return '文件不合法!!!';
}else{
return true;
}
}
},{
xtype: 'button',
margin: '100 0 0 200',
text: '确定上传',
handler: function(b,e){
var form = b.up().getForm();
if(form.isValid()){
form.submit({
url:'uploadFile.php',
success: function(form, action){
Ext.MessageBox.alert('提示:',action.result.msg);
},
failure:function(form, action){
Ext.MessageBox.alert('提示:',action.result.msg);
}
});
}
}
}]
}]
});
}
});
PHP(uploadFile.php)后台代码:
<?php
$file = $_FILES["file"]["tmp_name"];
$file_name = $_FILES["file"]["name"];
$result = move_uploaded_file($file, "/uploads/".$file_name);
$data['success'] = $result;
if($result){
$data['msg'] = '上传成功';
echo json_encode($data);
}else{
$data['msg'] = '上传失败';
echo json_encode($data);
}
?>
实现效果图:
validator详解:
validator是filefiled的一个配置项(所有的文本框组件基本都有这个配置项,用法完全相同),它跟其他配置项最大的不同在于validator的值是一个function,如代码中所示,这个function有唯一的参数value(文本框中的值),函数体中对这个value进行验证如果文件合法在返回true,不合法则返回错误的提示信息,至此验证完毕,validator用起来就是这么简单!
注:对上传文件类型的验证并非只有validator一种方法,使用正则(配置项:regex)可以实现同样的效果,在此特别声明,莫要局限于李坏给出的这一种方法,大家可以多多尝试。
作者:李坏
原文地址:http://www.itlee.name/qianduan/extjs/719.html