Maison >développement back-end >tutoriel php >Explication détaillée de l'exemple d'aperçu de téléchargement d'avatar PHP

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

墨辰丷original: 2018-05-23 11:36:561655parcourir

Cet article présente principalement l'explication détaillée des exemples d'aperçu de téléchargement d'avatar 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>

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

Principe :

Utiliser l'attribut enctype="multipart/form-data" du formulaire formulaire to Le fichier est temporairement placé dans le répertoire tmp du dossier wamp, puis le fichier est enregistré 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 :

PHP+jQuery+Ajax+Mysql Comment implémenter les compétences function_javascript d'expression d'humeur

js imite la méthode d'implémentation des fonctions strtotime() et date() dans les compétences php_javascript

Utiliser JavaScript pour implémenter Fonctions urlencode et urldecode_javascript de PHP

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication graphique détaillée des fonctions de sérialisation et de désérialisation PHPArticle suivant：Explication graphique détaillée des fonctions de sérialisation et de désérialisation PHP

Articles Liés

Voir plus