Laravelでファイルの種類を限定してファイルをアップロードする

Laravelでファイルアップロードサイトを作っていて、アップロードできるファイルの種類（画像、エクセルとか）を制限したいと思って、色々調べたのですが、以下のように簡単にできます。

Form sample

{!! Form::open(['class' => 'form-upload', 'url'=>'/upload/submit','files'=>true]) !!}

{{ Form::label('file','Upload a file.',array('id'=>'','class'=>'')) }}
    <div class="input-group">         
        <label class="input-group-btn">
        <span class="btn btn-primary">
            Select File
            {!! Form::file('file', ['style' => 'display: none;', 'accept' => '.jpg,.jpeg,.png,.gif,.pdf']) !!}
        </span>
        </label>
        <input style="width:350px;" type="text" class="form-control" readonly>
    </div>
    <br>
    
    <button class="btn btn-lg btn-primary" type="submit">Upload</button>
{!! Form::close() !!}

以下の一行でファイルの拡張子を指定することで、jpg, jpeg, png, gif, pdfのファイルだけを制御できます

{!! Form::file('file', ['style' => 'display: none;', 'accept' => '.jpg,.jpeg,.png,.gif,.pdf']) !!}

実際にブラウザでHTMLソースをみてみたら、Inputに変換されていることがわかります。

<span class="btn btn-primary">
    Select file
    <input style="display: none;" accept=".jpg,.jpeg,.png,.gif,.pdf" name="file_1" type="file">
</span>

JavaScript

他にJavaScriptでも制御できます。
例、Excelファイル（.xls、.xlsx）だけをアップロードできるようにする

<script type="text/javascript">

    function SetAccept() {
        document.getElementById("file").accept = "application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
    }
    SetAccept();
    </script>

imageだとimage/jpeg, image/gifなどを切り替えてよいです。
MIMEタイプ一覧をこちら参照できます。
http://www.geocities.co.jp/Hollywood/9752/mime.html

この記事がお役にたちましたらシェアをお願いします:)

• ツイート
•