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

Question

我要将注册页面中的图像文件名插入到我现有的数据库和表格中，并将其显示在页面上。

mysql中的表名是:patent_tbl，列是avatar

以下是示例代码，可在 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>

这也是我的头像输入数据，它当前用作文本输入。

<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 ?

这里还有 function.php

提前致谢

Answer 1

如果你不想在服务器上获取图像名称，你可以将图像名称存储在文本输入中，但是对于图像src，你必须将其保存在服务器上并将客户端img src设置为服务器图像，我在FireFox上尝试了这段代码，你可以尝试一下

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>