suchen

Heim >Backend-Entwicklung >PHP-Problem >Wie implementiert man die Bild-Upload-Vorschau in PHP?

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

Guanhui
GuanhuiOriginal
2020-07-21 15:12:553892Durchsuche

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

php ajax JS 事件 input
Stellungnahme：
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
Vorheriger Artikel：Was ist der Unterschied zwischen Sitzung und Cookie in PHP?Nächster Artikel：Was ist der Unterschied zwischen Sitzung und Cookie in PHP?

In Verbindung stehende Artikel

Mehr sehen