問題の本質
ユーザーがファイルを1つだけ選択した場合、ダウンロードしたファイルの拡張子を確認することは難しくありません。vtypeを宣言し、値の入力を確認するだけです。
Ext.apply(Ext.form.field.VTypes, { file: function(val, field) { var types = ['rtf', 'pdf', 'doc'], ext = val.substring(val.lastIndexOf('.') + 1); if(Ext.Array.indexOf(types, ext) === -1) { return false; } return true; } ,fileText: 'Invalid file' });
問題が発生するのは、複数のファイルがある場合、および/またはファイルの「重量」を確認する必要がある場合です。 問題は、上記のコードでは、フィールドは選択されたファイルが「嘘」である入力ではなく、入力が存在するテーブルを参照しているということです。
入力自体を取得するのは簡単です。
var input = Ext.get(field.id+'-fileInputEl'); - input.files.
誰かが理解していない場合、vanilla.jsの上の行は次のように聞こえます。
var input = document.getElementById(field.id+'-fileInputEl');
バニラはおそらくいくつかの試合を救っただろうが、私はおwhenが始まるときは本当に好きではなく、私の体は仕事の違いを感じません。
ファイルが1つだけで、非ネイティブ入力を使用してファイルをダウンロードしても構わない場合、問題は解決しました（そうではなかったと言えます）-ファイルダウンロードフィールドを取得し、File APIを使用してファイルの重みを検証します。 そうでなければ、いくつかの問題が残ります。
1.（いくつかの操作の後）複数のファイルを選択すると、フォームのフィールドには最初に選択したファイルのみが表示されます。
2.ネイティブ入力が必要な場合、フィールド構成でinputType： 'file'を設定し、size：50プロパティを設定しても役に立たない場合、そのsize属性は1になります。
ネイティブブラウザー要素の使用に関する質問-このトピックについていじる必要はありません-要素に何らかの動作があり、そのような機会があれば、それらを使用することを好みます。 ユーザーにとってはもっと身近なものです-彼はこのことから何を期待するかを知っています。
ただし、トピックから少し注意をそらすと、最近の更新の1つでFFがプレースホルダー属性のChromeスタイルの動作を採用したとき（フィールドに焦点を当てるとテキストが消えなくなりました）-少し気になりました。 この動作の利点を理解できません-入力する前にこのテキストを常に消去したいです。
解決策
Googleを使用する場合、ほとんどの場合、インターネット上でサーバー上のファイルのみを検証するか、フラッシュを使用することをお勧めします。 必要に応じてできます-あなたはそうすることができます。 また、多くのファイルをロードして検証できるuxも確認しました。これもオプションです。
そして、ほんの数行を実行して、File APIを使用できます。 同時に、あらゆる種類のIEが衰退しましたが、個人的にはこれについてあまり心配していません-ダウンロードオプションはまだ残っており、サーバーは引き続き検証します。 さらに、extを使用して、多少複雑なアプリケーションを作成する場合、ほとんどの場合、ブラウザーをエンドユーザーに指示できます。
次のように進みます-textfieldから継承し、inputType： 'file'を設定し、入力のサイズと構成内の複数の属性を設定します。 「ショート」アクセス（xtype）のために、このすべてのビジネスにエイリアスを割り当てます。 検証ルールをvtypeごとに説明します。 これにより、アプリケーションの任意のビューで目的の動作を持つフィールドを何度も使用し、柔軟に構成することができます（たとえば、許可されるファイルタイプと最大サイズを設定します）。
フィールドについて説明します。
Ext.define('fileupload',{ extend: 'Ext.form.field.Text' ,alias: 'widget.fileupload' // xtype: 'fileupload' ,inputType: 'file' ,listeners: { render: function (me, eOpts) { var el = Ext.get(me.id+'-inputEl'); el.set({ size: me.inputSize || 1 }); if(me.multiple) { el.set({ multiple: 'multiple' }); } } } });
何か説明が必要かどうかさえ知りません 一言で言えば-ネイティブ入力の「描画」の後に、サイズ属性が設定され（構成中またはデフォルトで1に設定）、構成に設定されている場合は複数属性が設定されます。 これで、ネイティブの構成可能な入力ができました。
バリデーターについて説明します。
Ext.apply(Ext.form.field.VTypes, { file: function(val, field) { var input, files, file ,acceptSize = field.acceptSize || 4096 // ,acceptMimes = field.acceptMimes || ['rtf', 'pdf', 'doc', 'xls', 'xlsx', 'zip', 'rar']; // input = Ext.get(field.id+'-inputEl'); files = input.getAttribute('files'); if ( ! files || ! window.FileReader) { return true; // . false } for(var i = 0, l = files.length; i < l; i++) { // file = files[i]; if(file.size > acceptSize * 1024) { this.fileText = (file.size / 1048576).toFixed(1) + ' MB: invalid file size ('+(acceptSize / 1024).toFixed(1)+' MB max)'; return false; } var ext = file.name.substring(file.name.lastIndexOf('.') + 1); if(Ext.Array.indexOf(acceptMimes, ext) === -1) { // this.fileText = 'Invalid file type ('+ext+')'; return false; } } return true; } });
ここでは、すべてが非常に明確であると思います。 デフォルトのファイルタイプ/サイズを設定し、入力を取得してそのファイルを確認するだけです。タイプ/サイズを確認してください。 すべてが非常に簡単です。
これで、ファイルをロードして検証し、フォームフィールドを次のように記述できます。
{ xtype: 'fileupload' ,vtype: 'file' ,multiple: true // ,acceptMimes: ['doc', 'xls', 'xlsx', 'pdf', 'zip', 'rar'] // ,acceptSize: 2048 // ,inputSize: 76 // size ,fieldLabel: 'File <span class="gray">(doc, xls, xlsx, pdf, zip, rar; 2 MB max)</span>' ,msgTarget: 'under' ,name: 'filesToUpload[]' }
実際には、このすべての経済をここで見ることができます -明確にするためにすべてが1つのファイルに収集されますが、一般的にはMVTS 4th extが大好きです。