自分の作ったweb上に画像をアップロードしてその画像を表示したい

Question

###自分の作ったweb上に画像をアップロードしてその画像を表示したい
＿
|＿|←ボタン押したらアップロード画面になる
それが終わったらwebに表示したいです

Comments

[gentaro]

https://teratail.com/help/question-tips
これ読んで質問文頑張って修正するか、ここでの回答に頼らずご自身で頑張ってみるか選びましょう。

[m.ts10806]

作業依頼なら然るべきところへ

[CHERRY]

できないのは、アップロード処理だけなんでしょうか？
Webサーバー側で受け取って保存する処理はできているのでしょうか？

Answer 1

UIはこれでよいですか？

<input type="file" value="up">
<div id="img">
<!--ここに画像をいれる-->
</div> 

参考

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelector('#up').addEventListener('change',e=>{
    var target=e.target;
    var file=target.files[0];
    if(file !==undefined){
      var fr = new FileReader();
      fr.addEventListener('load',e=>{
        var type=file.type;
        if(["image/jpeg","image/gif","image/png"].indexOf(type)>-1){
          var blob=new Blob([e.target.result],{type});
          var binary=String.fromCharCode.apply("",new Uint8Array(e.target.result));
          var base64="data:"+file.type+";base64,"+btoa(binary);
          var img=Object.assign(document.createElement('img'),{src:base64});
          Object.assign(document.querySelector('#img'),{textContent:""}).appendChild(img);
        }else{
          target.value="";
          document.querySelector('#img').textContent="";
        }
      });
      fr.readAsArrayBuffer(file);
    }
  });
});
</script>
<input type="file" value="up" id="up" accept="image/*">
<div id="img">
<!--ここに画像をいれる-->
</div> 

Comments

[退会済みユーザー]

やってみます

[退会済みユーザー]

ありがとうございました