input type="file"のボタンデザインとJavaScriptのサンプル

選択されていません

<label class="fileUploadBtn" tabindex="0">
  <input type="file" name="file" id="file" accept=".png, .jpg, .jpeg" multiple>ファイルを選択
</label>
<p id="fileName">選択されていません</p>

#file {
  position: absolute;
  opacity: 0;
  width: 10px;
}
#fileName {
  white-space: pre;
}
.fileUploadBtn {
  display: inline-block;
  padding: 1rem 2rem;
  background: #369;
  color: #fff;
  cursor: pointer;
}
.fileUploadBtn:hover,
.fileUploadBtn:focus {
  filter: brightness(1.2);
}

const file = document.getElementById('file');
const fileName = document.getElementById('fileName');
file.addEventListener('change', (event) => {
  const files = event.target.files;
  const fileNames = [];
  if (files.length > 3) {
    fileName.textContent = '選択可能なファイル数は3つまでです。';
    return;
  }
  for (let i = 0; i < files.length; i++) {
    fileNames.push(files[i].name);
  }
  const fileNamesList = fileNames.join('\n');
  fileName.textContent = fileNamesList ? fileNamesList : '選択されていません';
});

元記事を表示する