HTML入力ファイルコントロールはアップロードされるファイルの種類を制限します

入力ファイルの HTML コントロールを Web ページに追加します。

<input id="File1" type="ファイル" />

デフォルトでは、すべてのファイルタイプが表示されます。「word」、「excel」、「pdf」ファイルなど、設定したファイルタイプのみを表示するように制限したい場合はどうすればよいでしょうか。

解決策は、accept 属性を追加することです。例:

<input id="File1" type="file" accept=".xls,.doc,.txt,.pdf" />

これを選択すると、デフォルトの表示は次のようになります。

ファイル選択ボックスには、カスタムファイルタイプのファイルのみが表示されるので、非常に便利です。

ただし、これは問題を隠すための最も簡単な方法にすぎません。他のファイル形式を選択することもできます。

したがって、練習の種類を本当に制限したい場合 (実際、これは制限ではなく、必要なファイルの種類がデフォルトで表示されるだけであり、他の種類を選択できないという意味ではありません)、js またはバックグラウンドを通じて制御する必要があります。

サポートされているファイルの種類を添付します:

*.3gpp オーディオ/3gpp、ビデオ/3gpp 3GPP オーディオ/ビデオ
*.ac3 オーディオ/ac3 AC3 オーディオ
*.asf allpication/vnd.ms-asf 高度なストリーミング形式
*.au オーディオ/基本 AU オーディオ
*.css text/css カスケードスタイルシート
*.csv text/csv カンマ区切り値
*.doc アプリケーション/msword MS Word 文書
*.dot application/msword MS Word テンプレート
*.dtd application/xml-dtd 文書型定義
*.dwg image/vnd.dwg AutoCAD 図面データベース
*.dxf イメージ/vnd.dxf AutoCAD 図面交換形式
*.gif イメージ/gif グラフィック交換フォーマット
*.htm text/html ハイパーテキスト マークアップ言語
*.html text/html ハイパーテキスト マークアップ言語
*.jp2 イメージ/jp2 JPEG-2000
*.jpe 画像/jpeg JPEG
*.jpeg 画像/jpeg JPEG
*.jpg 画像/jpeg JPEG
*.js テキスト/javascript、アプリケーション/javascript JavaScript
*.json application/json JavaScript オブジェクト表記
*.mp2 audio/mpeg、video/mpeg MPEG オーディオ/ビデオ ストリーム、レイヤー II
*.mp3 audio/mpeg MPEG オーディオ ストリーム、レイヤー III
*.mp4 オーディオ/mp4、ビデオ/mp4 MPEG-4 オーディオ/ビデオ
*.mpeg video/mpeg MPEG ビデオ ストリーム、レイヤー II
*.mpg video/mpeg MPEG ビデオ ストリーム、レイヤー II
*.mpp アプリケーション/vnd.ms-project MS プロジェクト プロジェクト
*.ogg アプリケーション/ogg、オーディオ/ogg Ogg Vorbis
*.pdf application/pdf ポータブル ドキュメント フォーマット
*.png image/png ポータブルネットワークグラフィックス
*.pot application/vnd.ms-powerpoint MS PowerPoint テンプレート
*.pps アプリケーション/vnd.ms-powerpoint MS PowerPoint スライドショー
*.ppt アプリケーション/vnd.ms-powerpoint MS PowerPoint プレゼンテーション
*.rtf application/rtf、text/rtf リッチテキスト形式
*.svf イメージ/vnd.svf シンプルベクター形式
*.tif image/tiff タグ付き画像形式ファイル
*.tiff image/tiff タグ付き画像形式ファイル
*.txt text/plain プレーンテキスト
*.wdb application/vnd.ms-works MS Works データベース
*.wps application/vnd.ms-works ワークステキストドキュメント
*.xhtml application/xhtml+xml 拡張ハイパーテキスト マークアップ言語
*.xlc アプリケーション/vnd.ms-excel MS Excel チャート
*.xlm アプリケーション/vnd.ms-excel MS Excel マクロ
*.xls application/vnd.ms-excel MS Excel スプレッドシート
*.xlt application/vnd.ms-excel MS Excel テンプレート
*.xlw application/vnd.ms-excel MS Excel ワークスペース
*.xml text/xml、application/xml 拡張マークアップ言語
*.zip aplication/zip 圧縮アーカイブ

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<: Vue フロントエンドで PDF を生成してダウンロードする方法

>>: MySQL の lru リンクリストの簡単な分析