Home > Article > Backend Development > Ajax and PHP implement asynchronous uploading of avatars

Ajax and PHP implement asynchronous uploading of avatars

小云云Original: 2018-03-10 11:38:492240browse

This article mainly shares with you examples of asynchronous uploading of avatars using Ajax and PHP. I hope it can help you.

Effect screenshot:

Upload page

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        头像:<img id="avatar" src="" height="35" width="35" alt=""><br />
        选择文件:<input type="file" id="file1" /><br />
                 <input type="button" id="upload" value="上传" /> <span id="result"></span>
                 <img src="5fd411e985d2c939b90e2dfb.gif" height="100" width="100" style="display:none" id="imgWait" /> 
        <script src="jquery-1.11.2.min.js"></script>
        <script>
            $(function () {
                $("#upload").click(function () {
                    $("#imgWait").show();
                    var formData = new FormData();
                    formData.append("myfile", document.getElementById("file1").files[0]);   
                    $.ajax({
                        url: "upload.php",
                        type: "POST",
                        dataType: &#39;json&#39;,
                        data: formData,
                        /**
                        *必须false才会自动加上正确的Content-Type,否则会执行error步骤
                        */
                        contentType: false,
                        /**
                        * 必须false才会避开jQuery对 formdata 的默认处理，否则会报Uncaught TypeError: Illegal invocation
                        * XMLHttpRequest会对 formdata 进行正确的处理
                        */
                        processData: false,
                        success: function (data) {
                            if(data.code == 200){
                                $(&#39;#avatar&#39;).attr(&#39;src&#39;,data.datas.filename);
                            }
                            $(&#39;#result&#39;).html(data.msg);
                            $("#imgWait").hide();
                            setTimeout(function(){
                                $(&#39;#result&#39;).html(&#39;&#39;);
                            }, 1200);
                        },
                        error: function () {
                            alert("上传失败！");
                            $("#imgWait").hide();
                        }
                    });
                });
            });
        </script>
    </body>
</html>

Backend code:

<?php
    $tmp_name = $_FILES[&#39;myfile&#39;][&#39;tmp_name&#39;];
    $current_time = date("Y-m-d H-i-s");
    if(is_uploaded_file($tmp_name)){
        $filename = &#39;./&#39;.$current_time.&#39;.jpg&#39;;
        $return = move_uploaded_file($tmp_name,$filename);
        $return ? output(&#39;200&#39;,&#39;上传成功！&#39;,[&#39;filename&#39; => $filename]) : output(&#39;400&#39;,&#39;上传失败！&#39;);
    }else{
        output(&#39;555&#39;,&#39;非法文件！&#39;);
    }

    function output($code,$msg,$datas = array()){
        $outputData = array(
            &#39;code&#39; => $code,
            &#39;msg&#39; => $msg, 
            &#39;datas&#39; => $datas 
        );
        exit(json_encode($outputData));
    }

Related recommendations:

angularjs uses $http to asynchronously upload Excel file method sharing

How to implement asynchronous file upload in html

php and ajax implement asynchronous uploading of files or image code sharing

The above is the detailed content of Ajax and PHP implement asynchronous uploading of avatars. 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

Previous article：PHP realizes printing time code sharingNext article：PHP realizes printing time code sharing

See more

Ajax and PHP implement asynchronous uploading of avatars

Related articles