ExtJS 如何验证上传文件类型

最新推荐文章于 2023-05-12 17:56:23 发布

转载最新推荐文章于 2023-05-12 17:56:23 发布 · 6.8k 阅读

本文介绍如何使用ExtJS的filefield组件验证上传文件类型，并通过validator实现只允许特定类型的文件上传。

ExtJS 如何验证上传文件类型

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

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

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