Explication détaillée de l'exemple d'aperçu de téléchargement d'avatar PHP-tutoriel php-php.cn

Explication détaillée de l'exemple d'aperçu de téléchargement d'avatar PHP

墨辰丷

Libérer： 2023-03-27 16:08:02

original

2633 Les gens l'ont consulté

Cet article présente principalement l'exemple détaillé de l'aperçu du téléchargement d'avatar en PHP. Les amis intéressés peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Tout le monde est familier avec le téléchargement de photos. Cependant, dans les projets futurs, vous ne serez peut-être pas autorisé à télécharger des photos en utilisant la méthode de soumission de page d'actualisation. Par exemple, le téléchargement d'avatars, selon le bon sens, doit être sur la photo. album. Après avoir sélectionné la photo, confirmez le téléchargement, et elle ne sera certainement pas téléchargée via le formulaire, cliquez sur Soumettre pour actualiser le téléchargement. Je vais vous présenter deux images de téléchargement asynchrones sans actualisation + aperçu de l'image : la première consiste à télécharger via le plug-in uploadfy prêt à l'emploi, il existe de nombreux exemples sur Internet.

Mais ce que je vais me concentrer sur vous présenter est la deuxième méthode, le téléchargement d'images via Ajax. Étant donné que l'utilisation du plug-in uploadfy nécessite que l'appareil prenne en charge Flash au format swf, la première méthode ne peut pas être utilisée pour la plupart des téléphones mobiles. Tout d'abord, laissez-moi vous parler du principe de téléchargement : contrôlez le champ de texte du fichier via js. Après avoir sélectionné la photo, soumettez le formulaire de manière asynchrone via Ajax, puis utilisez la position de l'image comme valeur de retour et utilisez js pour définir le src. attribut de l'img comme valeur de retour.

Zone de téléchargement de l'avatar :

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>

Copier après la connexion

Page de traitement du téléchargement :

<?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>";
    }
    
  }
}

Copier après la connexion

Principe :

Placer temporairement le fichier dans le répertoire tmp du dossier wamp via l'attribut enctype="multipart/form-data" du formulaire formulaire , puis enregistrez le fichier dans le système via le programme php en arrière-plan.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.

Recommandations associées :

jQuery+PHPMéthode de mise en œuvre du classement par étoiles_jquery

jQuery+PHP réalise le contenu des champs de table modifiables et l'enregistre en temps réel_jquery

PHP+MySQL +jQuery glisser calques à volonté et enregistrement instantané de la position de glissement_jquery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!