お知らせ

現在サイトのリニューアル作業中のため、全体的にページの表示が乱れています。

HTML上の添付ファイル取得とダウンロードをJSでやる

投稿日：
言語::JavaScript言語::HTML

JavaScriptで添付ファイルを拾うのと、ファイルを落とす処理のサンプルコード

<html>
<head>
  <meta charset='utf-8'>
  <title>js file up/dl example</title>
  <script>
    window.onload = () => {
      const fr = new FileReader();
      const el = document.getElementById("test");

      fr.onload = (ev) => {
        const dl = document.createElement('a');
        dl.setAttribute('href', ev.target.result);
        dl.setAttribute('download', el.files[0].name);
        dl.style.display = 'none';
        document.body.appendChild(dl);
        dl.click();
        document.body.removeChild(dl);
      };

      el.onchange = () => {
        fr.readAsDataURL(el.files[0]);
      };
    };
  </script>
</head>
<body>
  <input type="file" id="test"></input>
</body>
</html>