2

ExtJs4のファイルフィールドに検証を追加して、ユーザーが.png、.jpeg画像ファイルのみを参照できるようにします。どうすればよいですか？

 {
     xtype: 'filefield',                                                                         
     id:'photoUpload',                                                                                                                                                 
     buttonOnly:true,
     buttonText: 'Photo'
 }
4

3 に答える 3

7

ファイルのアップロードがどのように機能するかを理解することが重要だと思います。将来のトラブルを防ぐために...

セキュリティ上の理由から、以下が適用されます。

  • ユーザーがアップロードフィールドを明示的にクリックしない限り、ブラウザはファイルシステムにアクセスできません。
  • ブラウザはアップロードされているファイルへのアクセスが最小限です。特に、JSコードはファイル名を表示できる場合がありますが（ブラウザはフィールドに表示する必要があります）、他には何も表示されません（ほとんどのブラウザのパス自体は正しくありません）。 1）。

アップロードプロセス自体は、次の手順で行われます。

  • ユーザーがアップロードフィールドをクリックして、ファイル選択ダイアログを開始します。
  • ブラウザはダイアログを介してファイルシステムへのアクセスを実装し、ユーザーがファイルを選択できるようにします。
  • OKクリックすると、ブラウザはファイルをサーバーに送信します。
  • サーバーはファイルをそのディレクトリに配置します（tempサーバーごとに構成されます）。
  • アップロードが完了すると、サーバー上のアップロードスクリプトがファイルの詳細とともに呼び出され、そのスクリプトがアップロードされたファイルに完全にアクセスできるようになります。

最後のステップは、実際の実際の名前、サイズ、内容など、ファイルの詳細に完全にアクセスできる唯一のポイントです。

ブラウザがjavascriptに与えるものはすべて、ブラウザに依存します。私が知っているすべてのブラウザは実際のファイル名を保持していますが（実際の実際のパスは保持していません）、ファイル名はブラウザによって異なりますが、将来のバージョンで動作するためにこれに依存することはできません。これは、ファイル名がクライアント側に表示されるためです。

したがって、推奨事項は次のとおりです。

サーバー側ですべてのファイルアップロードチェックを実行します。

繰り返しになりますが、特にクライアントが使用するブラウザーを知っていてテストできる場合は、JSクライアント側でファイル名を使用することをお勧めしますが、サーバーでこのテストを行うことを強くお勧めします。

最後に覚えておく必要があるのは、ユーザーがで終わるファイルをアップロードする可能性があることです.pngが、ファイル自体は.zip拡張子が変更されています-したがって、ファイルが.png実際にファイルデータを調べる必要があることを確認するには、サーバーのみですできる。

于 2013-01-28T12:42:46.450 に答える
6 
          {
             xtype: 'filefield',
             id:'photoUpload',
             buttonOnly:true,
             vtype:'fileUpload',
             buttonText: 'Photo'
          }

そして、私が使用しているVtype..

   Ext.apply(Ext.form.VTypes, {
             fileUpload: function(val, field) {                              
                                 var fileName = /^.*\.(gif|png|bmp|jpg|jpeg)$/i;
                                 return fileName.test(val);
                           },                 
             fileUploadText: 'Image must be in .gif,.png,.bmp,.jpg,.jpeg format'
  });
于 2013-01-28T07:14:45.083 に答える
1

「filefield」xtype構成で次のスニペットを試してください

regex     : (/.(gif|jpg|jpeg|png)$/i),
regexText : 'Only image files allowed for upload',
msgTarget : 'under'
于 2014-09-07T10:43:31.943 に答える