Home >Backend Development >PHP Tutorial >Detailed explanation of PHP avatar upload preview example

Detailed explanation of PHP avatar upload preview example

墨辰丷Original: 2018-05-23 11:36:561651browse

This article mainly introduces the detailed explanation of PHP avatar upload preview examples. Interested friends can refer to it. I hope it will be helpful to everyone.

Speaking of uploading pictures, everyone is familiar with it. However, in future projects, you may not be allowed to upload pictures using the submit refresh page method. For example, uploading avatars, according to common sense, must be in the photo album. After selecting the photo, confirm the upload, and it will definitely not be uploaded through the form, click submit to refresh the upload. I will introduce to you two types of asynchronous non-refresh uploading of pictures. Picture preview: The first one is uploaded through the ready-made uploadfy plug-in. There are many examples on the Internet.

But what I will focus on introducing to you is the second method, uploading images through Ajax. Because using the uploadfy plug-in requires the device to support Flash in swf format, the first method cannot be used for most mobile phones. First, let me tell you about the uploading principle: control the file text field through js. After selecting the photo, submit the form asynchronously through Ajax, then use the position of the picture as the return value, and use js to set the src attribute of the img as the return value. .

Upload avatar area:

Code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" type="text/css" />
<script src="bootstrap-3.3.7-dist/js/jquery-1.11.2.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

<style type="text/css">
#yl{ width:200px; height:200px; background-image:url(img/avatar.png); background-size:200px 200px;}
#file{ width:200px; height:200px; float:left; opacity:0;}
.modal-content{ width:500px;}
.kk{ margin-left:130px;}
</style>

</head>

<body>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  上传头像
</button>
<!-- 模态框（Modal） -->
<p class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <p class="modal-dialog">
    <p class="modal-content">
      <p class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
          ×
        </button>
        <h4 class="modal-title" id="myModalLabel">
          上传头像
        </h4>
      </p>
      <p class="modal-body">
        <form id="sc" action="upload.php" method="post" enctype="multipart/form-data" target="shangchuan">
  
  <input type="hidden" name="tp" value="" id="tp" />
  
  <p id="yl" class="kk">
    <input type="file" name="file" id="file" onchange="document.getElementById(&#39;sc&#39;).submit()" />
  </p>  
</form>
<iframe style="display:none" name="shangchuan" id="shangchuan">
</iframe>

      </p>
      <p class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
        </button>
        <!--<button type="button" class="btn btn-primary">
          提交更改
        </button>-->
        
      </p>
    </p><!-- /.modal-content -->
  </p><!-- /.modal -->
</p>


</body>

<script type="text/javascript">

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

Upload processing page:

<?php

if($_FILES["file"]["error"])
{
  echo $_FILES["file"]["error"];
}
else
{
  if(($_FILES["file"]["type"]=="image/jpeg" || $_FILES["file"]["type"]=="image/png")&& $_FILES["file"]["size"]<1024000000)
  {
    $fname = "./img/".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>";
    }
    
  }
}

Principle:

Temporarily place the file in the form through the enctype="multipart/form-data" attribute In the tmp directory in the wamp folder, the file is saved in the system through the background php program.

The above is the entire content of this article, I hope it will be helpful to everyone's study.

Related recommendations:

PHP jQuery Ajax Mysql How to implement the mood expression function_javascript skills

js imitates strtotime() and date() function implementation method in php_javascript skills

Use JavaScript to implementPHPurlencode and urldecode function_javascript skills

The above is the detailed content of Detailed explanation of PHP avatar upload preview example. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed graphic explanation of PHP serialization and deserialization functionsNext article：Detailed graphic explanation of PHP serialization and deserialization functions

See more

Detailed explanation of PHP avatar upload preview example

Related articles