Preview of php avatar upload

Preview of php avatar upload tape:

Talking about uploading pictures, you are not unfamiliar, but in future development projects, you may not be allowed to use the submit refresh page upload pictures, such as uploading avatars, according to common sense, it must be after the album selection of photos, confirm the upload, but certainly not through the form, click Submit refresh upload. . I would like to introduce two kinds of asynchronous non-refresh upload pictures + picture preview: the first is upload through the ready-made uploadfy plug-in, many examples online. But I will focus on the second one, uploading pictures through Ajax. Because using uploadfy plug-ins requires devices to support Flash in swf format, for most mobile phones, the first way is not available. First, let me talk about upload principle: control file text field through js, submit form form form asynchronously through Ajax after selecting photos, and then submit the graph.
The position of the slice is used as the return value, and the src attribute of img is set to the return value using js.

Upload head area:

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>Untitled document</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 trigger mode box -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Upload the Avatar
</button>
<!-- Modal frame( 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">
                    Upload the Avatar
                </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('sc').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">Close
                </button>
                <!--<button type="button" class="btn btn-primary">
                    Submit changes
                </button>-->
                
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


</body>

<script type="text/javascript">

//callback,Call this method to pass a file path, the variable background image
function showimg(url)
{
    var div = document.getElementById("yl");
    div.style.backgroundImage = "url("+url+")";
    
    document.getElementById("tp").value = url;
}

</script>

</html>

Uploaded Processing Page:

<?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('This document already exists!');</script>";
        }
        else
        {
            move_uploaded_file($_FILES["file"]["tmp_name"],$filename);
            
            unlink($_POST["tp"]);
            
            echo "<script>parent.showimg('{$fname}');</script>";
        }
        
    }
}

Principle:

The file is temporarily placed in the tmp directory in the wamp folder through the enctype="multipart/form-data" attribute of the form form form, and then saved in the system through the background php program.

Posted by jjk2 on Thu, 04 Jul 2019 13:51:15 -0700

Programmer Group

Preview of php avatar upload

Hot Keywords