memo4

document.getElementById('fileInput').addEventListener('change', function(event) {
  const file = event.target.files[0];

  if (file) {
    const reader = new FileReader();

    reader.onload = function(e) {
      const base64 = e.target.result; // Data URL（base64付きの文字列）
      console.log(base64);
      document.getElementById('output').textContent = base64;
    };

    reader.readAsDataURL(file); // Base64のDataURLとして読み込む
  }
});


document.getElementById('fileInput').addEventListener('change', function(event) {
  const file = event.target.files[0];

  const reader = new FileReader();
  reader.onload = function(e) {
    const base64 = e.target.result;
    console.log(base64); // data:〜〜base64文字列
  };

  reader.readAsDataURL(file); // ←ここがBase64にするポイント！
});


document.getElementById('fileInput').addEventListener('change', function(event) {
  const file = event.target.files[0];
  const reader = new FileReader();

  reader.onload = function(e) {
    const base64 = e.target.result;
    console.log(base64); // ← ここで確認できるよ
    document.getElementById('output').textContent = base64;
  };

  reader.readAsDataURL(file); // ← ここでbase64化
});

<input type="file" id="fileInput">
<pre id="output" style="white-space: pre-wrap;"></pre>

<script>
  document.getElementById('fileInput').addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (!file) return;

    const reader = new FileReader();

    reader.onload = function(e) {
      const base64 = e.target.result;
      document.getElementById('output').textContent = base64;
      console.log('Base64:', base64);
    };

    reader.readAsDataURL(file);
  });
</script>

<input type="file" id="fileInput">
<pre id="output"></pre>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $('#fileInput').on('change', function () {
    const file = $(this).prop('files')[0];
    const reader = new FileReader();

    reader.onload = function (e) {
      const base64 = e.target.result;
      $('#output').text(base64);
    };

    reader.readAsDataURL(file);
  });
</script>


//check
<input type="file" id="fileInput">
<pre id="output"></pre>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $('#fileInput').on('change', function () {
    const file = $(this).prop('files')[0];
    const reader = new FileReader();

    reader.onload = function (e) {
      const base64 = e.target.result;
      $('#output').text(base64);
    };

    reader.readAsDataURL(file);
  });
</script>

//即時関数
<input type="file" onchange="toBase64(this)">
<pre id="output"></pre>

<script>
  function toBase64(input) {
    const file = input.files[0];
    const reader = new FileReader();

    reader.onload = function (e) {
      const base64 = e.target.result;
      document.getElementById('output').textContent = base64;
    };

    reader.readAsDataURL(file);
  }
</script>

//64だけ
reader.onload = function (e) {
  const base64Full = e.target.result;
  const base64Only = base64Full.split(',')[1]; // ← 純粋なBase64文字列だけ
  console.log(base64Only);
};


\\バイナリ
document.getElementById('fileInput').addEventListener('change', function (event) {
  const file = event.target.files[0];

  const reader = new FileReader();
  reader.onload = function (e) {
    // バイナリデータとして取得
    const binaryData = e.target.result;

    // バイナリデータを表示
    document.getElementById('output').textContent = new Uint8Array(binaryData);
    console.log(binaryData);  // バイナリデータを表示（consoleにも出力）
  };

  // ArrayBufferとしてファイルを読み込む
  reader.readAsArrayBuffer(file);
});