Beispiel für die Implementierung der Avatar-Upload-Vorschaufunktion in PHP-PHP-Tutorial-php.cn

Beispiel für die Implementierung der Avatar-Upload-Vorschaufunktion in PHP

黄舟

Freigeben： 2023-03-14 22:46:02

Original

1855 Leute haben es durchsucht

PHP-Avatar-Upload mit Vorschau:

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, z. B. dem gesunden Menschenverstand entsprechend , der Avatar muss hochgeladen werden, nachdem das Foto im Album ausgewählt wurde. Er wird definitiv nicht über das Formular hochgeladen. Klicken Sie zum Aktualisieren auf „Senden“. 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. Ich werde mich jedoch 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 asynchron über Ajax, verwenden Sie dann die Position des Bildes
als Rückgabewert und verwenden Sie es js, um das src-Attribut von img als Rückgabewert festzulegen.

Avatar-Bereich hochladen:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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="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） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    上传头像
                </h4>
            </div>
            <div 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" />
    
    <div id="yl" class="kk">
        <input type="file" name="file" id="file" onchange="document.getElementById(&#39;sc&#39;).submit()" />
    </div>
    
    
    
</form>

<iframe style="display:none" name="shangchuan" id="shangchuan">
</iframe>

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


</body>

<script type="text/javascript">

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

</script>

</html>

Nach dem Login kopieren

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

Nach dem Login kopieren

Grundsatz:

Bestanden Das Attribut enctype="multipart/form-data" des Formulars legt die Datei vorübergehend im tmp-Verzeichnis im Wamp-Ordner ab und speichert die Datei dann über das Hintergrund-PHP-Programm im System.

Das obige ist der detaillierte Inhalt vonBeispiel für die Implementierung der Avatar-Upload-Vorschaufunktion in PHP. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!