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:36:561550Durchsuche
Dieser Artikel stellt hauptsächlich die detaillierten Erläuterungen zu PHP-Avatar-Upload-Vorschaubeispielen vor. Ich hoffe, dass er für alle hilfreich ist.
Jeder ist mit dem Hochladen von Bildern vertraut. In zukünftigen Projekten ist es Ihnen jedoch möglicherweise nicht gestattet, Bilder mit der Methode „Seite aktualisieren“ hochzuladen. Nach gesundem Menschenverstand müssen Sie beispielsweise keine Bilder hochladen 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.
Avatarbereich 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('sc').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('该文件已存在！');</script>";
}
else
{
move_uploaded_file($_FILES["file"]["tmp_name"],$filename);
unlink($_POST["tp"]);
echo "<script>parent.showimg('{$fname}');</script>";
}
}
}Prinzip:
Platzieren Sie die Datei vorübergehend im Formular über das Attribut enctype="multipart/form-data" In Im TMP-Verzeichnis im WAMP-Ordner wird die Datei über das PHP-Hintergrundprogramm im System gespeichert.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.
Verwandte Empfehlungen:
PHP+jQuery+Ajax+Mysql So implementieren Sie die Stimmungsausdrucksfunktion_Javascript-Fähigkeiten
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!