画像をアップロードしてプレビューを表示したい

Question

上の画像のように

• 画像がないときはデフォルトの画像が表示され
• タップすると画像をアップロードできる

ような機能を実装したいのですが、どのようにしてできるのでしょうか？

<input type="file" />ではこのようにすることができなく、困っています。

Reactを使っています。

よろしくお願いします。

Comments

[colling]

送信ボタンはなくて、ファイルを選択したら即アップロードでしょうか？

[退会済みユーザー]

説明不足で申し訳ございません。送信ボタンは別であって、プレビューをして送信をする流れです。

[colling]

ファイル選択 > プレビュー > 送信ボタンで送信ですね？そのあとは、アップロード完了メッセージを表示でしょうか？

Answer 1

Reactさっぱりわからないので、普通のjacascriptですが、、、。

1.<input type=“file”>を<label>で囲み、その中に<img>を入れておくと、<img>もクリック範囲になります。
2.<input type=“file”>はCSSで非表示にします。
3.<input type=“file”>の中身が変わったら、javascriptで<img>のsrc属性を書き換えます。

<style>
#upfile {
  display:none;/*input要素を消しています*/
}
img{
  height:100px;
  width:100px;
  object-fit: cover;
}
</style>
<script>
imgRead = new FileReader();//FileReaderを作る
imgRead.onload = function (imgReadEvent) {
  document.getElementById("uploadPreview").src = imgReadEvent.target.result;//uploadPreviewを書き換え
};
function loadImageFile() {//onchangeで動作
  if (document.getElementById("upfile").files.length === 0) { return; }//ファイルが0個だったらリターンして終了
  var imgFile = document.getElementById("upfile").files[0];//先頭のファイルをimgFileに入れる
  imgRead.readAsDataURL(imgFile);
}
</script>

<form action="" method="post" enctype="multipart/form-data">
  <label><!--inputに対するlabelをimgの外側に置くことでimgもクリック範囲となります。-->
      <img id="uploadPreview" src="https://codesign.tips/sandbox/upload2/neko.jpg">
      <input id="upfile" type="file" name="upfile[]" accept="image/*" onchange="loadImageFile();" />
  </label>
  <input type="submit" value="送信">
</form>

Comments

[退会済みユーザー]

遅くなり大変申し訳ございません。

ご指摘の通りにすると実装することができました！ありがとうございます。