Ajax et PHP implémentent le téléchargement asynchrone d'avatars-tutoriel php-php.cn

Ajax et PHP implémentent le téléchargement asynchrone d'avatars

小云云

Libérer： 2023-03-21 07:40:02

original

2239 Les gens l'ont consulté

Cet article partage principalement avec vous un exemple de téléchargement asynchrone d'avatars utilisant Ajax et PHP. J'espère qu'il pourra vous aider.

Capture d'écran de l'effet :

Page de téléchargement

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

Copier après la connexion

Code backend :

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

Copier après la connexion

Recommandations associées :

Angularjs utilise $http pour télécharger de manière asynchrone des fichiers Excel à partager

Comment implémenter le téléchargement de fichiers asynchrone en HTML

php et ajax implémentent le téléchargement asynchrone de fichiers ou le partage de code image

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!