Wie implementiert man die Bild-Upload-Vorschau in PHP?

Guanhui
Freigeben: 2023-03-02 19:26:02
Original
3835 Leute haben es durchsucht

Wie implementiert man die Bild-Upload-Vorschau in PHP?

Wie implementiert man die Bild-Upload-Vorschau in PHP?

Hören Sie sich zuerst das Onchange-Ereignis des Eingabe-Tags an. Verwenden Sie dann AJAX, um die hochgeladene Datei in PHP zu empfangen und schließlich den Dateizugriffspfad zurückzugeben Verwenden Sie einfach JS zum Rendern.

Beispielcode

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>上传头像</title>
<style type="text/css">
  *{
    font-family:"微软雅黑";}
  #zong{
    /*border:1px solid black;*/
    position:relative;
    width:52%;
    height:500x;
    left:24%}
  .nr{
    float:left;
    margin-right:30px;}
  #yl{width:240px; height:240px; background-size:240px 240px;}
  #file{width:240px; height:240px; float:left; opacity:0;}
</style>
</head>

<body>

<div id="zong">
<form id="sc" action="2.php" method="post" enctype="multipart/form-data" target="shangchuan">
  
  <input type="hidden" name="tp" value="" id="tp" />
  
  <div id="yl" style="background-image:url(./image/1.jpg)" class="nr">//头像显示的位置
    <input type="file" name="file" id="file" onchange="document.getElementById(&#39;sc&#39;).submit()" />
  </div>
  <div class="nr">
  </div> 
</form>

<iframe style="display:none" name="shangchuan" id="shangchuan">
</iframe>

</div>
</body>

<script type="text/javascript">

//回调函数,调用该方法传一个文件路径,改变背景图
function showimg(url)
{
  var div = document.getElementById("yl");
  div.style.backgroundImage = "url("+url+")";
  
  document.getElementById("tp").value = url;
}

</script>

</html>
Nach dem Login kopieren
rrree

Empfohlenes Award-Tutorial: „PHP

Das obige ist der detaillierte Inhalt vonWie implementiert man die Bild-Upload-Vorschau in PHP?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
php
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage