JavaScriptを使用して画像の入力ファイルを表示する方法

ファイル選択ボタンとプレビュー領域の作成: 最も基本的な方法は、ファイル選択ボタンと画像のプレビュー領域を作成することです。以下のコードは、HTMLとJavaScriptを使用してこれを実現する例です。

HTML:

<input type="file" id="imageInput">
<div id="imagePreview"></div>

JavaScript:

const imageInput = document.getElementById('imageInput');
const imagePreview = document.getElementById('imagePreview');
imageInput.addEventListener('change', function() {
  const file = this.files[0];
  const reader = new FileReader();
  reader.onload = function(e) {
    const img = document.createElement('img');
    img.src = e.target.result;
    imagePreview.innerHTML = '';
    imagePreview.appendChild(img);
  }
  reader.readAsDataURL(file);
});

プレビュー時の画像サイズ制限: ユーザーが大きな画像ファイルを選択した場合、プレビューに時間がかかることがあります。これを制限するために、画像のサイズを制限することができます。以下のコードは、ファイルのサイズをチェックし、一定の制限値を超える場合にはプレビューを表示しない例です。

const MAX_FILE_SIZE = 1024 * 1024; // 1MB
imageInput.addEventListener('change', function() {
  const file = this.files[0];
  if (file.size <= MAX_FILE_SIZE) {
    // ファイルサイズが制限内の場合にのみプレビューを表示
    // 以前のコードと同様の方法でプレビューを表示する
  } else {
    alert('ファイルサイズが大きすぎます。1MB以下の画像を選択してください。');
    this.value = ''; // 選択をクリア
  }
});

画像のアップロード: 最終的に、ユーザーが選択した画像をサーバーにアップロードする方法も説明します。以下のコードは、フォームの送信時に選択された画像ファイルをサーバーに送信する例です。

HTML:

<form action="/upload" method="POST" enctype="multipart/form-data">
  <input type="file" name="image">
  <input type="submit" value="アップロード">
</form>

サーバーサイドのコードは言語やフレームワークによって異なりますが、例としてNode.jsとExpress.jsを使用した場合のコードを示します。

const express = require('express');
const multer = require('multer');
const app = express();
const upload = multer({ dest: 'uploads/' });
app.post('/upload', upload.single('image'), function(req, res) {
  // ファイルはreq.fileでアクセスできます
  // ファイルの処理や保存などを行うことができます
  res.send('アップロードが完了しました。');
});
app.listen(3000, function() {
  console.log('サーバーが起動しました。');
});