suchen

Heim  >  Artikel  >  Backend-Entwicklung  >  Ausführliche Erläuterung des Vorschaubeispiels für den PHP-Avatar-Upload

Ausführliche Erläuterung des Vorschaubeispiels für den PHP-Avatar-Upload

墨辰丷
墨辰丷Original
2018-05-23 11:35:502620Durchsuche

Dieser Artikel stellt hauptsächlich das detaillierte Beispiel der Avatar-Upload-Vorschau in PHP vor. Ich hoffe, dass es für alle hilfreich ist.

Jeder ist mit dem Hochladen von Bildern vertraut. In zukünftigen Projekten ist es jedoch möglicherweise nicht gestattet, Bilder mit der Methode zum Hochladen von Avataren hochzuladen Nachdem Sie das Foto ausgewählt haben, bestätigen Sie den Upload. Wenn das Foto definitiv nicht über das Formular hochgeladen wird, klicken Sie auf „Senden“, um den Upload zu aktualisieren. Ich werde Ihnen zwei asynchrone, nicht aktualisierungsfähige Upload-Bilder + Bildvorschau vorstellen: Die erste besteht darin, über das vorgefertigte Uploadfy-Plug-In hochzuladen. Es gibt viele Beispiele im Internet.

Aber ich werde mich darauf konzentrieren, Ihnen die zweite Methode vorzustellen, das Hochladen von Bildern über Ajax. Da die Verwendung des Uploadfy-Plug-Ins erfordert, dass das Gerät Flash im SWF-Format unterstützt, kann die erste Methode für die meisten Mobiltelefone nicht verwendet werden. Lassen Sie mich zunächst das Prinzip des Hochladens erläutern: Steuern Sie das Dateitextfeld über js. Senden Sie das Formular nach der Auswahl des Fotos asynchron über Ajax, verwenden Sie dann die Position des Bildes als Rückgabewert und legen Sie den Quellcode mit js fest Attribut des img als Rückgabewert.

Avatar-Bereich hochladen:

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>

Verarbeitungsseite hochladen: 

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

Prinzip:

Legen Sie die Datei über das enctype="multipart/form-data"-Attribut des Formulars vorübergehend in das tmp-Verzeichnis im Wamp-Ordner und übergeben Sie sie dann es durch den Hintergrund Das PHP-Programm speichert die Datei im System.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.


Verwandte Empfehlungen:

jQuery+PHPStar-Rating-Implementierungsmethode_jquery

jQuery+PHP realisiert bearbeitbare Tabellenfeldinhalte und speichert sie in Echtzeit_jquery

PHP+MySQL +jQuery-Dragging Ebenen nach Belieben und Speichern der Ziehposition sofort_jquery

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung des Vorschaubeispiels für den PHP-Avatar-Upload. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：Ausführliche Erläuterung des Vorschaubeispiels für den PHP-Avatar-UploadNächster Artikel：Ausführliche Erläuterung des Vorschaubeispiels für den PHP-Avatar-Upload

In Verbindung stehende Artikel

Mehr sehen