如何将图像发布到数据库列并在页面上显示？

Question

I'm gonna insert image file name in registration page into my existing database and table and show it on page.

table name in mysql is: patient_tbl and column is avatar

Here is sample code which is available on w3schools

  <form enctype="multipart/form-data" action="image_upload_demo_submit.php" method="post" name="image_upload_form" id="image_upload_form">
<div id="imgArea"><img src="./img/default.jpg">
  <div class="progressBar">
    <div class="bar"></div>
    <div class="percent">0%</div>
  </div>
  <div id="imgChange"><span>Change Photo</span>
    <input type="file" accept="image/*" name="image_upload_file" id="image_upload_file">
  </div>
</div>

Here is also my input data for avatar that it's currently working as text input.

<input rows="3" cols="30" id="avatar" name="avatar" value="" type="text">

what should I add into this form or in the functions.php that image name will be posted into my Avatar column ?

How to show it on page as img src ?

Here's also function.php

Thanks in advance

Answer 1

if you dont want to get image name on server, you can store image name in text input,but for image src you have to save it on server and make client img src to server image, I tried this code on FireFox, you can try it

 function getName(elem){ var img=document.getElementsByTagName("img")[0] var imgname=document.getElementById("imgname") if(elem.files.length==0) { imgname.value="" img.src="./img/default.jpg" return } var file=elem.files[0] imgname.value=file.name var src = URL.createObjectURL(file) img.src=src } 

 <div id="imgArea"><img src="./img/default.jpg"> <div class="progressBar"> <div class="bar"></div> <div class="percent">0%</div> </div> <div> <span> Image Name </span> <input type="text" id="imgname" /> </div> <div id="imgChange"><span>Change Photo</span> <input type="file" onchange="getName(this)" accept="image/*" name="image_upload_file" id="image_upload_file"> <br/> </div> </div>