cari

Rumah >pembangunan bahagian belakang >masalah PHP >PHP 如何实现图片上传预览？

PHP 如何实现图片上传预览？

Guanhui
Guanhuiasal
2020-07-21 15:12:553894semak imbas

PHP 如何实现图片上传预览？

PHP 如何实现图片上传预览？

首先监听input标签的onchange事件；然后使用AJAX将文件上传到服务端；接着在PHP中接收上传的文件，并将文件保存起来；最后将文件访问路径返回，并使用JS渲染即可。

示例代码

<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>
<?php
session_start();
$uid = $_SESSION["uid"];
if($_FILES["file"]["error"])
{
  echo $_FILES["file"]["error"];
}
else
{
  if(($_FILES["file"]["type"]=="image/jpeg" || $_FILES["file"]["type"]=="image/png")&& $_FILES["file"]["size"]<1024000)
  {
    $fname = "./a/image/".date("YmdHis").$_FILES["file"]["name"];  //头像存储的路径
    
    $filename = iconv("UTF-8","gb2312",$fname);
    
    if(file_exists($filename))
    {
      echo "<script>alert(&#39;该文件已存在！&#39;);</script>";
    }
    else
    {
      move_uploaded_file($_FILES["file"]["tmp_name"],$filename);
      
      unlink($_POST["tp"]);
      echo "<script>parent.showimg(&#39;{$fname}&#39;);</script>";
    }
    
  }
}

推荐奖教程：《PHP》

Atas ialah kandungan terperinci PHP 如何实现图片上传预览？. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

php ajax JS 事件 input
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：PHP 中 Session 和 Cookie 区别？Artikel seterusnya：php中怎么将二维数组转为一维数组

Artikel berkaitan

Lihat lagi