suchen

Heim >Backend-Entwicklung >PHP-Tutorial >Ajax und PHP implementieren das asynchrone Hochladen von Avataren

Ajax und PHP implementieren das asynchrone Hochladen von Avataren

小云云
小云云Original
2018-03-10 11:38:492332Durchsuche

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>

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

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：PHP realisiert die gemeinsame Nutzung von DruckzeitcodesNächster Artikel：PHP realisiert die gemeinsame Nutzung von Druckzeitcodes

In Verbindung stehende Artikel

Mehr sehen