<label for="avatar">Choose a profile picture:</label><input type="file" name="avatar" accept="image/png, image/jpeg" />

label {  display: block;  font:    1rem "Fira Sans",    sans-serif;}input,label {  margin: 0.4rem 0;}

メモ:文字列には常にC:\fakepath\ の接頭辞が付き、ファイルの実際のパスにはなりません。疑わしいソフトウェアがユーザーのファイル構造を推測することを防止するためです。

<input  type="file"   accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" />

メモ:capture は以前は論理値であり、存在した場合、ファイル入力を要求する代わりに、カメラやマイクなどその端末のメディア取り込み機器を使用するように要求していました。

メモ:webkitdirectory はもともと WebKit ベースのブラウザー向けのみに実装されたものですが、 Firefox でも使用できます。しかし、比較的広く対応されていますが、まだ標準になっておらず、代替手段がない限りは使用するべきではありません。

<input type="file" accept="image/*,.pdf" />

<form method="post" enctype="multipart/form-data">  <div>    <label for="file">アップロードするファイルを選択してください</label>    <input type="file" name="file" multiple />  </div>  <div>    <button>送信</button>  </div></form>

div {  margin-bottom: 10px;}

メモ:この例は GitHub にもあります。 —ソースコードとライブ実行を確認してください。

<form method="post" enctype="multipart/form-data">  <div>    <label for="profile_pic">アップロードするファイルを選択してください</label>    <input      type="file"           name="profile_pic"      accept=".jpg, .jpeg, .png" />  </div>  <div>    <button>送信</button>  </div></form>

div {  margin-bottom: 10px;}

メモ:この例は GitHub にもあります。 —ソースコードとライブ実行を確認してください。

const elem = document.createElement("input");elem.type = "file";elem.addEventListener("cancel", () => {  console.log("Cancelled.");});elem.addEventListener("change", () => {  if (elem.files.length == 1) {    console.log("File selected: ", elem.files[0]);  }});elem.click();

メモ:この例の完全なソースコードは GitHub —file-example.html (ライブ版もあります) で見ることができます。 CSS については説明しません。 JavaScript が中心です。

<form method="post" enctype="multipart/form-data">  <div>    <label for="image_uploads"      >アップロードする画像を選択してください (PNG, JPG)</label    >    <input      type="file"           name="image_uploads"      accept=".jpg, .jpeg, .png"      multiple />  </div>  <div>    <p>アップロードするファイルが選択されていません</p>  </div>  <div>    <button>送信</button>  </div></form>

html {  font-family: sans-serif;}form {  background: #ccc;  margin: 0 auto;  padding: 20px;  border: 1px solid black;}form ol {  padding-left: 0;}form li,div > p {  background: #eee;  display: flex;  justify-content: space-between;  margin-bottom: 10px;  list-style-type: none;  border: 1px solid black;}form img {  height: 64px;  order: 1;}form p {  line-height: 32px;  padding-left: 10px;}form label,form button {  background-color: #7f9ccb;  padding: 5px 10px;  border-radius: 5px;  border: 1px ridge black;  font-size: 0.8rem;  height: auto;}form label:hover,form button:hover {  background-color: #2d5ba3;  color: white;}form label:active,form button:active {  background-color: #0d3f8f;  color: white;}

const input = document.querySelector("input");const preview = document.querySelector(".preview");input.style.opacity = 0;

メモ:ファイル入力欄を非表示にするためにopacity を使用し、visibility: hidden やdisplay: none を使用しないのは、支援技術が後二者のファイル入力欄が対話可能ではないと解釈するからです。

input.addEventListener("change", updateImageDisplay);

function updateImageDisplay() {  while (preview.firstChild) {    preview.removeChild(preview.firstChild);  }  const curFiles = input.files;  if (curFiles.length === 0) {    const para = document.createElement("p");    para.textContent = "アップロードするファイルが選択されていません";    preview.appendChild(para);  } else {    const list = document.createElement("ol");    preview.appendChild(list);    for (const file of curFiles) {      const listItem = document.createElement("li");      const para = document.createElement("p");      if (validFileType(file)) {        para.textContent = `ファイル名: ${file.name}, ファイルサイズ: ${returnFileSize(          file.size,        )}.`;        const image = document.createElement("img");        image.src = URL.createObjectURL(file);        image.alt = image.title = file.name;        listItem.appendChild(image);        listItem.appendChild(para);      } else {        para.textContent = `ファイル名: ${file.name}: ファイル形式が有効ではありません。選択しなおしてください。`;        listItem.appendChild(para);      }      list.appendChild(listItem);    }  }}

// https://developer.mozilla.org/ja/docs/Web/Media/Guides/Formats/Image_typesconst fileTypes = [  "image/apng",  "image/bmp",  "image/gif",  "image/jpeg",  "image/pjpeg",  "image/png",  "image/svg+xml",  "image/tiff",  "image/webp",  "image/x-icon",];function validFileType(file) {  return fileTypes.includes(file.type);}

function returnFileSize(number) {  if (number < 1e3) {    return `${number} バイト`;  } else if (number >= 1e3 && number < 1e6) {    return `${(number / 1e3).toFixed(1)} KB`;  } else {    return `${(number / 1e6).toFixed(1)} MB`;  }}

メモ:ここで使用されている "KB" および "MB" の単位は、1KB = 1000B というSI 接頭辞の慣例に従っており、macOS と同様です。システムが異なると、ファイルサイズの表し方も異なります。例えば、Ubuntu では 1KiB = 1024B という IEC 接頭辞を使用していますが、RAM の仕様では 2 のべき乗を表す SI 接頭辞 (1KB = 1024B) がよく使われます。このため、ここでは1e3 (1000) や1e6 (100000) を1024 や1048576 の代わりに使用しました。 アプリケーションでは、正確なサイズが重要である場合は、ユーザーに単位系を明確に伝える必要があります。

const button = document.querySelector("form button");button.addEventListener("click", (e) => {  e.preventDefault();  const para = document.createElement("p");  para.append("画像がアップロードされました。");  preview.replaceChildren(para);});