How to upload avatar in php-PHP Problem-php.cn

Home

Backend Development

PHP Problem

How to upload avatar in php

王林

Oct 15, 2021 pm 04:09 PM

phpavatar

php method to implement avatar upload: [

How to upload avatar in php

The operating environment of this article: windows10 system, php 7. Thinkpad t480 computer.

I recently needed to use the avatar upload function when working on a project, so I recorded the implementation process.

If we want to complete the avatar upload function, we need a php page, a We define the page as touxiang.php, and the other page as upload.php.

Look at the specific code:

1.touxiang.php

<!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">
                    ×
                </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>

On this page we need to introduce a modal box and three files: bootstrap.min.css, jquery-1.11.2.min.js, bootstrap.min.js

2.upload.php

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

    }
}

The effect is as follows:

How to upload avatar in php

Recommended learning:php training

The above is the detailed content of How to upload avatar in php. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn