ExtJS 如何验证上传文件类型

ExtJS 如何验证上传文件类型

时间: 2013/08/08 | 分类:ExtJS | 作者: 李坏 | 浏览：195 | 抢沙发

ExtJS中有封装好的组件来实现文件上传功能，用起来可谓是非常之方便，但是对于很多ExtJS新手来说不知道如何控制文件的上传类型，比如当我们只想让用户上传‘txt’类型的文件时，怎样能够实现当用户上传非‘txt’文件时，给出错误提示呢？对于如何验证文件类型，使用field组件的validator验证器应该是一种较为方便的方法。
在ExtJS4.x 如何实现密码验证功能一篇文章中我们曾使用过validator对密码进行验证，今天我们借文件上传功能的实现，给大家详细的分享一下validator的用法。首先给出实现文件上传功能的代码：
JS代码：

01	Ext.application({

02	name: 'Demo',

03	appFolder: 'app',

04	launch: function(){

05	Ext.create('Ext.container.Viewport', {

06	margin:'100 0 0 200',

07

items:[{

08	xtype: 'form',

09	title: 'ExtJS 文件上传',

10	width: 400,

11	height: 300,

12	defaults: {

13	margin: '20 0 0 30',

14

},

15

items: [{

16	xtype: 'filefield',

17	name: 'file',

18	fieldLabel: '上传文件',

19	buttonText: '选择文件',

20	labelWidth: 80,

21	width: 300,

22	allowBlank: false,

23	msgTarget: 'under',

24	validator: function(value){

25	var arr = value.split('.');

26	if(arr[arr.length-1] != 'txt'){

27	return '文件不合法！！！';

28

}else{

29	return true;

30

}

31

}

32

},{

33	xtype: 'button',

34	margin: '100 0 0 200',

35	text: '确定上传',

36	handler: function(b,e){

37	var form = b.up().getForm();

38	if(form.isValid()){

39	form.submit({

40	url:'uploadFile.php',

41	success: function(form, action){

42	Ext.MessageBox.alert('提示:',action.result.msg);

43

},

44	failure:function(form, action){

45	Ext.MessageBox.alert('提示:',action.result.msg);

46

}

47

});

48

}

49

}

50

}]

51

}]

52

});

53

}

54

});

PHP（uploadFile.php）后台代码：

01

<?php

02	$file = $_FILES["file"]["tmp_name"];

03	$file_name = $_FILES["file"]["name"];

04

05	$result = move_uploaded_file($file, "/uploads/".$file_name);

06

07	$data['success'] = $result;

08

09	if($result){

10	$data['msg'] = '上传成功';

11	echo json_encode($data);

12

}else{

13	$data['msg'] = '上传失败';

14	echo json_encode($data);

15

}

16

17

?>

实现效果图：

validator详解：
validator是filefiled的一个配置项（所有的文本框组件基本都有这个配置项，用法完全相同），它跟其他配置项最大的不同在于validator的值是一个function，如代码中所示，这个function有唯一的参数value（文本框中的值），函数体中对这个value进行验证如果文件合法在返回true，不合法则返回错误的提示信息，至此验证完毕，validator用起来就是这么简单！
注：对上传文件类型的验证并非只有validator一种方法，使用正则（配置项：regex）可以实现同样的效果，在此特别声明，莫要局限于李坏给出的这一种方法，大家可以多多尝试。