<input type =“ file”>が画像ファイルのみを受け付けるようにする方法は？

376

<input type="file">タグを使用して画像ファイルのみをアップロードする必要があります。

現在、すべてのファイルタイプを受け入れます。しかし、私は、唯一の特定の画像ファイルの拡張子にそれを制限したい.jpg、.gifなど

この機能を実現するにはどうすればよいですか？

html

— kbvishnu
ソース

サーバー側で使用されるテクノロジーは何ですか？

— Erdal G.

1

kbvishnu、おそらくあなたはずっと前に受け入れた答えを再考することができます。別の答えを受け入れる必要はありません。私は、回答で得たフラグの数と他の回答と比較した投票のレベルに基づいて、少なくとも承認しないことを検討する必要があることを示唆しています。

— アーロンホール

943

inputタグのaccept属性を使用します。したがって、PNG、JPEG、GIFのみを受け入れるには、次のコードを使用できます。

<input type="file" name="myImage" accept="image/x-png,image/gif,image/jpeg" />

スニペットを展開

または単に：

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

スニペットを展開

これは、ユーザーに表示するファイルタイプに関するヒントをブラウザに提供するだけですが、これは簡単に回避できるため、サーバーにアップロードされたファイルも常に検証する必要があります。

IE 10以降、Chrome、Firefox、Safari 6以降、Opera 15以降で動作するはずですが、モバイルでのサポートは非常に不完全です（2015年現在）。ターゲットプラットフォームをよくテストしてください。

ブラウザーのサポートの詳細については、http：//caniuse.com/#feat=input-file-acceptを参照してください

— 狂った笑い
ソース

@madcap accept="file/csv, file/xls"は有効ですか？

— KNU

19

あなたはそれがあります確信していますかimage/x-png？このリストによると、それだけimage/pngです。iana.org/assignments/media-types/media-types.xhtml

— マイクロ

6

それが選択された答えになるはずです！サーバーサイドをチェックする必要があることを示すメモが欠けているだけです（サポートされていないブラウザーのため、しかしセキュリティのためにも）

— Erdal G.

1

多分それは答えが答えだったときにうまくいきましたが、それを試してみてFFのためにうまくいきませんでした。accept = " 。png

— Diego

1

完全にそれに依存しないでください。他のファイルも簡単に受け入れることができます。ファイルを開くウィンドウで許可されているファイルの種類を変更するだけです。

163

これを使用する：

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

FFとChromeの両方で動作します。

— ティロ
ソース

14

accept属性は検証ツールではありません。すべてのアップロードは常にサーバーで検証される必要があります...

— TlonXP

1

ネイティブのAndroidブラウザーではまだサポートされていませんが、他のブラウザーではうまく機能します。caniuse.com

— ＃

ファイルプロンプトのタイプドロップダウンに「イメージファイル」と表示されるため、このソリューションが気に入っています。

— 18年

これはSVGを許可するため、注意が必要です。

— スティーブンマードック

これにより、最大画像ファイル.png、.jpg、.jpeg、.gif、.bmp、.ico、.tiff、.svg、.ai、.psp、.pcd、.pct、.rawが許可されます。したがって、タイプについて具体的に言及することをお勧めします。

— タマライT

76

このように使う

<input type="file" accept=".png, .jpg, .jpeg" />

それは私のために働いた

https://jsfiddle.net/ermagrawal/5u4ftp3k/

— えーモヒト・アグラワル
ソース

これはiOS 12では機能しません。ユーザーはデバイスでビデオを選択できます。

— user3160227

28

手順：
1.入力タグに
Accept 属性を
追加します2. JavaScriptで検証します3.サーバー側の検証を追加して、コンテンツが本当に期待されるファイルタイプかどうかを確認します

HTMLおよびJavaScriptの場合：

<html>
<body>
<input name="image" type="file" id="fileName" accept=".jpg,.jpeg,.png" onchange="validateFileType()"/>
<script type="text/javascript">
    function validateFileType(){
        var fileName = document.getElementById("fileName").value;
        var idxDot = fileName.lastIndexOf(".") + 1;
        var extFile = fileName.substr(idxDot, fileName.length).toLowerCase();
        if (extFile=="jpg" || extFile=="jpeg" || extFile=="png"){
            //TO DO
        }else{
            alert("Only jpg/jpeg and png files are allowed!");
        }   
    }
</script>
</body>
</html>

説明：

accept属性は、ファイルチューザポップアップに表示されるファイルをフィルタリングします。ただし、検証ではありません。これはブラウザに対するヒントにすぎません。ユーザーは引き続きポップアップのオプションを変更できます。
JavaScriptはファイル拡張子のみを検証しますが、選択したファイルが実際のjpgまたはpngであるかどうかを実際に検証することはできません。
したがって、サーバー側でファイルの内容を検証するために記述する必要があります。

— スーリヤカメスワララオラビ
ソース

1

最も完全な答え

— パラノイド

27

これは、

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

しかし、これは良い方法ではありません。ファイルを画像かどうかを確認するには、サーバー側でコーディングする必要があります。

画像ファイルが実際の画像か偽の画像かを確認します

if(isset($_POST["submit"])) {
    $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
    if($check !== false) {
        echo "File is an image - " . $check["mime"] . ".";
        $uploadOk = 1;
    }
    else {
        echo "File is not an image.";
        $uploadOk = 0;
    }
}

詳細については、こちらをご覧ください

http://www.w3schools.com/tags/att_input_accept.asp
http://www.w3schools.com/php/php_file_upload.asp

— アショクデヴァトワル
ソース

5

このドキュメントacceptを<input type="file">読むために属性を使用できますhttp://www.w3schools.com/tags/att_input_accept.asp

— ユッサン
ソース

3

type = "file"およびaccept = "image / *"（または必要な形式）を使用して、ユーザーが特定の形式のファイルを選択できるようにします。ただし、ユーザーは他のタイプのファイルを選択できるため、クライアント側で再度確認する必要があります。これでうまくいきます。

<input #imageInput accept="image/*" (change)="processFile(imageInput)" name="upload-photo" type="file" id="upload-photo" />

そして、あなたのJavaScriptスクリプトで

processFile(imageInput) {
    if (imageInput.files[0]) {
      const file: File = imageInput.files[0];
      var pattern = /image-*/;

      if (!file.type.match(pattern)) {
        alert('Invalid format');
        return;
      }

      // here you can do whatever you want with your image. Now you are sure that it is an image
    }
  }

— マティ・カッサネッリ
ソース

開発者が許可するさまざまな拡張子をすべて指定する必要なく、ファイルが実際に画像であるかどうかをチェックするため、これが最良の答えです

— Adam Marshall

あなたの考えがわかります。これは有効なJS構文const file: File = imageInput.files[0];ですか？また、入力へのIDの割り当ては、従来の方法では行われません。

— Ivan P.

実際、これはJSではなく、typescriptです。ブロックコードは、Angularプロジェクトからコピーされました。JavaScriptファイルで使用する場合は、型定義（：File）を省略する必要があります

— Mati Cassanelli

0

複数の画像を一度にアップロードしたい場合はmultiple、入力に属性を追加できます。

upload multiple files: <input type="file" multiple accept='image/*'>

スニペットを展開

— JerryGoyal
ソース