React入門者へおすすめ動画&書籍おすすめ!

フロントエンド入門者へおすすめ動画&書籍おすすめ!

React

ReactとHooksでローカルから画像を選択してプレビュー画面を表示させる

2020年4月23日

0
0

ReactとHooksでローカルから画像を選択してプレビュー画面を表示させる

やりたいこととしては、Reactでfile input で画像を選択して

 

サーバーなどへupする前に、プレビュー画面を表示させること

ReactとHooksでプレビュー画面の実装

import React, { useState } from "react";

export default function App() {
  const [uploadedFile, setUploadedFile] = useState({});
  const onChange = e => {
    setUploadedFile(e.target.files[0]);
    var selectedFile = e.target.files[0];
    var reader = new FileReader();
    var imgtag = document.getElementById("myimage");
    imgtag.title = selectedFile.name;
    reader.onload = function(event) {
      imgtag.src = event.target.result;
    };
    reader.readAsDataURL(selectedFile);
  };

  return (
    <>
      <p>{uploadedFile.name}</p>
      <img style={{ width: "100%" }} id="myimage" alt="" />
      <input
        type="file"
        className="custom-file-input"
        id="customFile"
        onChange={onChange}
      />
    </>
  );
}

ReactとHooksでプレビュー画面のyoutube動画

 

SandBoxでも試せるよ

Pocket
LinkedIn にシェア

React入門者へおすすめ動画&書籍おすすめ!

フロントエンド入門者へおすすめ動画&書籍おすすめ!

  • この記事を書いた人
  • 最新記事

藤沢瞭介(Ryosuke Hujisawa)

りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています!

-React

Copyright© off.tokyo , 2021 All Rights Reserved Powered by AFFINGER5.