ExtJS：ファイルをマルチロードして検証する簡単な方法（HTML5 File APIを使用）

サーバーだけでなくクライアントでもユーザーがダウンロードしたファイルを検証する必要がある場合、またはユーザーが一度にアップロードする複数のファイルを選択できるようにする場合（複数=「複数」）、おそらくExt.formを使用するときにいくつかの問題が発生します。 .field.File。

問題の本質

ユーザーがファイルを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が大好きです。