Maison > Article > développement back-end > Exemple d'implémentation de la fonction d'aperçu du téléchargement d'avatar en PHP

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

黄舟original: 2017-08-13 09:21:291817parcourir

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>

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 :

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!

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：Exemples de code pour les fonctions couramment utilisées en phpArticle suivant：Exemples de code pour les fonctions couramment utilisées en php

Articles Liés

Voir plus