web-dev-qa-db-ja.com

<input type = "file" />がこれらのタイプのみを受け入れるようにする方法は？

アップローダーはこれらのタイプのみを許可します：

  • doc、docx。
  • xls、xlsx。
  • ppt、pptx。
  • txt。
  • pdf。
  • 画像タイプ。

どうすればこれを達成できますか？ accept属性には何を入れるべきですか？ご協力いただきありがとうございます。

編集!!!

もう一つ質問があります。ファイルを選択するためのポップアップが表示されたら、右下隅にすべての許可ファイルを含むドロップダウンリストがあります。私の場合、リストは長くなります。リストにあるように、All Supported Typesというオプションがあります。デフォルトで選択して他のすべてのオプションを削除するにはどうすればよいですか？

任意の助けをいただければ幸いです。ありがとうございました。

htmlhtml5file-uploadinput
57
Triet Doan

accept属性 の値は、HTML5 LCによると、コンマで区切られたアイテムのリストです。各リストは、image/gifなどの特定のメディアタイプ、または表記ですすべてのimageタイプを参照するimage/*など、または.gifなどのファイル名拡張子。 IE 10+およびChromeはこれらすべてをサポートしていますが、Firefoxは拡張機能をサポートしていません。したがって、最も安全な方法は、 メディアタイプ およびimage/*などの表記を使用することです。この場合

<input type="file" name="foo" accept=
"application/msword, application/vnd.ms-Excel, application/vnd.ms-PowerPoint,
text/plain, application/pdf, image/*">

私が意図を正しく理解している場合。ブラウザは、権限のあるレジストリで指定されたとおりにメディアタイプ名を正確に認識しない可能性があるため、いくつかのテストが必要です。

100
Jukka K. Korpela

以下のように使用

<input type="file" accept=".xlsx,.xls,image/*,.doc, .docx,.ppt, .pptx,.txt,.pdf" />
68
Ajith

MIME_typeを値として持つaccept属性を使用します

<input type="file" accept="image/gif, image/jpeg" />
11
Chamika Sandamal

powerPointおよびPDFファイルの場合：

<html>
<input type="file" placeholder="Do you have a .ppt?" name="pptfile" id="pptfile" accept="application/pdf,application/vnd.ms-PowerPoint,application/vnd.openxmlformats-officedocument.presentationml.slideshow,application/vnd.openxmlformats-officedocument.presentationml.presentation"/>
</html>
6
Amir Md Amiruzzaman

重要な更新：

Application/msword、application/vnd.ms-Excel、application/vnd.ms-PowerPoint ...のみを使用しているため、2003製品までしか許可されておらず、最新のものは許可されていません。私はこれを見つけました：

application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.ms-PowerPoint, application/vnd.openxmlformats-officedocument.presentationml.slideshow, application/vnd.openxmlformats-officedocument.presentationml.presentation

それには新しいものも含まれます。他のファイルについては、次の方法でファイル内のMIMEタイプを取得できます（langをご容赦ください）（MIMEリストタイプでは、これはありません）。

enter image description here

コンテンツの種類を選択してコピーできます

5
Epistomai

w3schoolsに記載 ：

audio/*-すべてのサウンドファイルが受け入れられます

video/*-すべてのビデオファイルが受け入れられます

image/*-すべての画像ファイルが受け入れられます

MIME_type-パラメータなしの有効なMIMEタイプ。標準のMIMEタイプの完全なリストについては、IANA MIMEタイプをご覧ください

4
Wilker Iceri

画像のためにこれを書いてください

<input type=file accept="image/*">

その他の場合は、フォームのaccept属性を使用して、特定のタイプを制限するようブラウザに提案できます。ただし、確認するためにサーバー側コードで再検証する必要があります。クライアントが送信するものを信頼しない

1
Sagar Vaghela