React
さっぱりわからないので、普通のjacascript
ですが、、、。
1.<input type=“file”>
を<label>
で囲み、その中に<img>
を入れておくと、<img>もクリック範囲になります
。
2.<input type=“file”>
はCSSで非表示
にします。
3.<input type=“file”>
の中身が変わったら、javascript
で<img>のsrc属性を書き換えます
。
html
1<style>
2#upfile {
3 display:none;/*input要素を消しています*/
4}
5img{
6 height:100px;
7 width:100px;
8 object-fit: cover;
9}
10</style>
11<script>
12imgRead = new FileReader();//FileReaderを作る
13imgRead.onload = function (imgReadEvent) {
14 document.getElementById("uploadPreview").src = imgReadEvent.target.result;//uploadPreviewを書き換え
15};
16function loadImageFile() {//onchangeで動作
17 if (document.getElementById("upfile").files.length === 0) { return; }//ファイルが0個だったらリターンして終了
18 var imgFile = document.getElementById("upfile").files[0];//先頭のファイルをimgFileに入れる
19 imgRead.readAsDataURL(imgFile);
20}
21</script>
22
23<form action="" method="post" enctype="multipart/form-data">
24 <label><!--inputに対するlabelをimgの外側に置くことでimgもクリック範囲となります。-->
25 <img id="uploadPreview" src="https://codesign.tips/sandbox/upload2/neko.jpg">
26 <input id="upfile" type="file" name="upfile[]" accept="image/*" onchange="loadImageFile();" />
27 </label>
28 <input type="submit" value="送信">
29</form>