Exemple d'implémentation de la fonction d'aperçu du téléchargement d'avatar en PHP-tutoriel php-php.cn

Exemple d'implémentation de la fonction d'aperçu du téléchargement d'avatar en PHP

黄舟

Libérer： 2023-03-14 22:46:02

original

1832 Les gens l'ont consulté

Téléchargement d'avatar PHP avec aperçu :

Tout le monde est familier avec le téléchargement d'images. Cependant, dans les projets futurs, vous ne serez peut-être pas autorisé à télécharger des images en utilisant la méthode de soumission d'actualisation de la page, comme le téléchargement selon le bon sens. , l'avatar doit être téléchargé après avoir sélectionné la photo dans l'album, et il ne sera certainement pas téléchargé via le formulaire et cliquez sur Soumettre pour actualiser. 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. Cependant, je vais me concentrer sur la présentation de la deuxième méthode, à savoir 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 du 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 l'attribut src de img Set comme valeur de retour.

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

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>

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 :

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

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!