web-dev-qa-db-ja.com

<input type = "file">拡張子による選択可能ファイルの制限

input type = "file"要素で選択できるファイルを拡張子で制限するにはどうすればよいですか？

私はすでにaccept属性を知っていますが、chromeでは、最後に定義されたMIMEタイプ（この場合は "gif"）によってファイルを制限し、FF4は何も制限しません。

<input type="file" accept="image/jpg, image/gif">

私は何か間違っていますか？または、他の方法がありますか？

何かアドバイスを...

htmlinput-type-file
65
haemse

正直なところ、ファイルを制限する最良の方法はサーバー側です。人々はクライアント上でファイルタイプをスプーフィングできるため、サーバー転送時に完全なファイル名を取得し、ファイルタイプを解析してからメッセージを返すのが通常最善の策です。

12
Sean Haddy

簡単な方法は次のとおりです。

<input type="file" accept=".gif,.jpg,.jpeg,.png,.doc,.docx">

IE9を除くすべてのブラウザーで動作します。 IE10 +ではテストしていません。

175
Edi Budimilic

注：この回答は2011年のものです。当時は本当に良い回答でしたが、2015年現在、ほとんどのブラウザでネイティブHTMLプロパティがサポートされているため、 （通常）そのようなカスタムロジックをJSに実装する必要はありません。 Ediの答え および ドキュメント を参照してください。

ファイルをアップロードする前に、JavaScriptを使用してファイルの拡張子を確認し、一致しない場合にフォームが送信されないようにすることができます。アップロードするファイルの名前は、フォーム要素の「値」フィールドに保存されます。

「.gif」で終わるファイルのみのアップロードを許可する簡単な例を次に示します。

<script type="text/javascript">
    function checkFile() {
        var fileElement = document.getElementById("uploadFile");
        var fileExtension = "";
        if (fileElement.value.lastIndexOf(".") > 0) {
            fileExtension = fileElement.value.substring(fileElement.value.lastIndexOf(".") + 1, fileElement.value.length);
        }
        if (fileExtension.toLowerCase() == "gif") {
            return true;
        }
        else {
            alert("You must select a GIF file for upload");
            return false;
        }
    }
</script>

<form action="upload.aspx" enctype="multipart/form-data" onsubmit="return checkFile();">
    <input name="uploadFile" id="uploadFile" type="file" />

    <input type="submit" />
</form>

ただし、この方法は絶対確実ではありません。ユーザーがjavascriptをオフにするか、ブラウザに到着した後にコードを編集することでJavascriptチェックを無効にできるため、Sean Haddyはサーバー側で常にチェックすることをお勧めします。クライアント側のチェックに加えて、サーバー側を確実にチェックしてください。また、ユーザーが2 GBのファイルでサーバーをクラッシュさせないように、サーバー側のサイズも確認することをお勧めします（FlashまたはJavaアプレットまたは何か）。

ただし、ここで説明した方法を使用してクライアント側を事前に確認することは、間違いを防ぐことができ、重大ではないいたずらに対する小さな抑止力になるため、依然として有用です。

22
Joshua Carmody
 function uploadFile() {
     var fileElement = document.getElementById("fileToUpload");
        var fileExtension = "";
        if (fileElement.value.lastIndexOf(".") > 0) {
            fileExtension = fileElement.value.substring(fileElement.value.lastIndexOf(".") + 1, fileElement.value.length);
        }
        if (fileExtension == "odx-d"||fileExtension == "odx"||fileExtension == "pdx"||fileExtension == "cmo"||fileExtension == "xml") {
         var fd = new FormData();
        fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
        var xhr = new XMLHttpRequest();
        xhr.upload.addEventListener("progress", uploadProgress, false);
        xhr.addEventListener("load", uploadComplete, false);
        xhr.addEventListener("error", uploadFailed, false);
        xhr.addEve`enter code here`ntListener("abort", uploadCanceled, false);
        xhr.open("POST", "/post_uploadReq");
        xhr.send(fd);
        }
        else {
            alert("You must select a valid odx,pdx,xml or cmo file for upload");
            return false;
        }

      }

これを試してみました、非常にうまくいきます

1
prajwal