Ajax und PHP implementieren das asynchrone Hochladen von Avataren-PHP-Tutorial-php.cn

Ajax und PHP implementieren das asynchrone Hochladen von Avataren

小云云

Freigeben： 2023-03-21 07:40:02

Original

2285 Leute haben es durchsucht

Dieser Artikel zeigt Ihnen hauptsächlich ein Beispiel für das asynchrone Hochladen von Avataren mit Ajax und PHP. Ich hoffe, es kann Ihnen helfen.

Effekt-Screenshot:

Seite hochladen

<!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>

Nach dem Login kopieren

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));
    }

Nach dem Login kopieren

Verwandte Empfehlungen:

Angularjs verwendet $http, um Excel-Dateien asynchron zum Teilen hochzuladen

So implementieren Sie den asynchronen Datei-Upload in HTML

PHP und Ajax implementieren das asynchrone Hochladen von Dateien oder das Teilen von Bildcode

Das obige ist der detaillierte Inhalt vonAjax und PHP implementieren das asynchrone Hochladen von Avataren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!