HTML
JavaScript

アイコンだけでファイルのアップロード

 目的

’submit’ボタンを使わずにファイルが選択されたら自動的にファイルをアップロードする。
また、ファイルの選択はFont Awesomeのアイコンをボタンとして使用する。

HTML

index.html
<form method="post" enctype="multipart/form-data">
    <label for="filesend">
        <span class="filelabel">
            <i class="fas fa-file-upload fa-border my-color fa-4x faa-ring animated"></i>
        </span>
        <input type="file" name="file" id="filesend">
        <input type="submit" value="Upload" id="upload">
    </label>
</form>

Font Awesomeの使い方に関しては以下を参照

JavaScript

script.js
document.getElementById('filesend').onchange = function(){
    this.form.submit();
};

onchangeイベントでform.submit()関数を利用することでファイルが選択されたと同時にファイルをアップロード