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)可以实现同样的效果,在此特别声明,莫要局限于李坏给出的这一种方法,大家可以多多尝试。