Предварительный просмотр изображения после выбора изображения jquery-Примеры кода

$(function () {
  //Получить поле ввода
  var input = $("#imageInput");
  //Скрыть поле ввода
  input.hide();
  //При нажатии на кнопку просмотра
  $("#browseButton").click(function () {
    //Показать поле ввода
    input.show();
    //Когда пользователь выбирает изображение
    input.change(function () {
      //Получить имя файла изображения
      var fileName = $(this).val();
      //Показать имя файла
      $("#fileName").text(fileName);
      //Предварительный просмотр изображения
      var image = $("<img>").attr("src", fileName);
      $("#preview").empty().append(image);
    });
  });
});

import React, { useState, useRef } from 'react';

function PreviewImageUpload() {
  const [image, setImage] = useState('');
  const [preview, setPreview] = useState('');
  const fileInputRef = useRef(null);

  const handleImageChange = (e) => {
    const file = e.target.files[0];

    if (!file) {
      return;
    }

    const reader = new FileReader();
    reader.readAsDataURL(file);

    reader.onload = () => {
      setImage(file);
      setPreview(reader.result);
    };
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // Загрузите изображение здесь
  };

  const handleClick = () => {
    fileInputRef.current.click();
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="file"
        ref={fileInputRef}
        style={{ display: 'none' }}
        onChange={handleImageChange}
      />
      <button type="button" onClick={handleClick}>
        Выберите изображение
      </button>
      {preview && <img src={preview} alt="Загрузить предварительный просмотр" />}
    </form>
  );
}

export default PreviewImageUpload;

import React, { useState, useEffect } from 'react';

function PreloadImage({ src }) {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const image = new Image();
    image.src = src;
    image.onload = () => {
      setLoading(false);
    };
  }, [src]);

  if (loading) {
    return <div>Загрузка изображения...</div>;
  }

  return <img src={src} alt="" />;
}

export default PreloadImage;