ホームページ > ウェブフロントエンド > ライユイのチュートリアル > ファイルの種類とサイズを制限するようにLayUIのアップロードモジュールを構成するにはどうすればよいですか?

ファイルの種類とサイズを制限するようにLayUIのアップロードモジュールを構成するにはどうすればよいですか?

Robert Michael Kim
リリース: 2025-03-18 12:57:21
オリジナル
190 人が閲覧しました

ファイルの種類とサイズを制限するようにLayUIのアップロードモジュールを構成するにはどうすればよいですか?

LayUIのアップロードモジュールを設定してファイルの種類とサイズを制限するには、 upload.renderメソッド内でacceptextssizeプロパティをセットアップする必要があります。以下は、これらの設定を構成する方法の例です。

 <code class="javascript">layui.use(['upload'], function(){ var upload = layui.upload; // Execute upload var uploadInst = upload.render({ elem: '#test1' // Specify the element that triggers the upload ,url: '/upload/' // Upload interface ,accept: 'file' // Specify the type of files allowed. Options are 'images', 'file', 'video', 'audio' ,exts: 'jpg|png|gif' // Allowed file extensions ,size: 500 // Maximum file size in KB ,done: function(res){ // Upload completed callback console.log(res) } ,error: function(){ // Request exception callback console.log('Upload failed'); } }); });</code>
ログイン後にコピー

この例では、 acceptプロパティはアップロードできる一般的なタイプのファイルを指定し、 exts許可されたファイル拡張子を指定し、 sizeキロバイトの最大ファイルサイズを設定します。

LayUIのアップロードモジュールを使用して制限できる特定のファイルタイプは何ですか?

LayUIのアップロードモジュールを使用すると、[ acceptおよびextsプロパティを介してファイルタイプを制限できます。 acceptプロパティは、許可されている一般的なタイプのファイルを指定するために、次の値のいずれかに設定できます。

  • images :画像ファイルのみを許可します。
  • file :ファイルタイプを許可します。
  • video :ビデオファイルのみを許可します。
  • audio :オーディオファイルのみを許可します。

さらに、 extsプロパティを使用して、許可されたファイル拡張子を指定することにより、許可されたファイルタイプをさらに制限できます。 |で区切られた複数の拡張機能をリストできますキャラクター。たとえば、 exts: 'jpg|png|gif' .jpg.png 、および.gifファイルのみを許可します。

LayUIのアップロードモジュールで最大ファイルサイズ制限を設定するにはどうすればよいですか?

LayUIのアップロードモジュールで最大ファイルサイズ制限を設定するには、 upload.renderメソッド内でsizeプロパティを使用する必要があります。 sizeプロパティの値は、キロバイト(KB)で指定されています。たとえば、500 kbの最大ファイルサイズを設定するには、次のようなアップロードを構成します。

 <code class="javascript">upload.render({ elem: '#test1' ,url: '/upload/' ,size: 500 // Maximum file size in KB ,done: function(res){ console.log(res) } ,error: function(){ console.log('Upload failed'); } });</code>
ログイン後にコピー

この構成により、500 kBを超えるファイルがアップロードされないようにします。

LayUIでファイルの種類またはサイズの制限が違反されている場合、どのエラーメッセージをカスタマイズできますか?

layUIを使用すると、 upload.renderメソッド内のerrorコールバック関数を使用して、ファイルの種類またはサイズの制限が違反されたときにエラーメッセージをカスタマイズできます。違反の種類に基づいてエラーメッセージをカスタマイズできます。ファイルタイプとサイズの制限のエラーメッセージをカスタマイズする方法の例は次のとおりです。

 <code class="javascript">upload.render({ elem: '#test1' ,url: '/upload/' ,accept: 'file' ,exts: 'jpg|png|gif' ,size: 500 ,done: function(res){ console.log(res) } ,error: function(index, upload){ var item = this.item; // Get the current upload item if(upload === 'accept'){ layer.msg('Only JPG, PNG, and GIF files are allowed'); } else if(upload === 'size'){ layer.msg('The file size exceeds the limit of 500 KB'); } else { layer.msg('Upload failed'); } } });</code>
ログイン後にコピー

この例では、 layer.msgを使用して、ファイルの種類( accept )またはサイズ( size )の制限に違反したときにカスタムエラーメッセージを表示します。これらのメッセージを変更してニーズに合わせて変更し、他のメソッドを使用して望ましい場合はエラーを表示できます。

以上がファイルの種類とサイズを制限するようにLayUIのアップロードモジュールを構成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート