recherche

Maison  >  Questions et réponses  >  le corps du texte

javascript - Remplacer l'avatar de l'utilisateur

Il existe une exigence selon laquelle les utilisateurs peuvent modifier l'avatar affiché. Mon idée est la suivante : l'utilisateur télécharge d'abord l'image de l'avatar, remplace l'image de l'avatar sur le serveur, puis actualise pour afficher l'image mise à jour.
La question est de savoir comment JS peut-il télécharger des images sur le serveur, en combinaison avec PHP ou Nodejs

ringa_leeringa_lee2811 Il y a quelques jours719

répondre à tous(3)je répondrai

  • 为情所困

    为情所困2017-05-16 13:05:32

    Écrivez simplement un formulaire pour télécharger des fichiers

    <form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="file" id="file" />
<input type="submit" name="submit" value="Submit" />
</form>

    Écrivez un autre php pour le traitement des fichiers

    <?php
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/pjpeg"))
&& ($_FILES["file"]["size"] < 20000))
  {
  if ($_FILES["file"]["error"] > 0)
    {
    echo "Return Code: " . $_FILES["file"]["error"] . "<br />";
    }
  else
    {
    echo "Upload: " . $_FILES["file"]["name"] . "<br />";
    echo "Type: " . $_FILES["file"]["type"] . "<br />";
    echo "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />";
    echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br />";

    if (file_exists("upload/" . $_FILES["file"]["name"]))
      {
      echo $_FILES["file"]["name"] . " already exists. ";
      }
    else
      {
      move_uploaded_file($_FILES["file"]["tmp_name"],
      "upload/" . $_FILES["file"]["name"]);
      echo "Stored in: " . "upload/" . $_FILES["file"]["name"];
      }
    }
  }
else
  {
  echo "Invalid file";
  }
?>

    répondre
    0
  • 仅有的幸福

    仅有的幸福2017-05-16 13:05:32

    http://www.jq22.com/jquery-in... Reportez-vous au plug-in
    Convertissez en encodage base64 et ajaxez la chaîne d'encodage vers le backend pour l'enregistrer localement. Il est préférable de compresser le fichier dans des proportions égales avant de le télécharger.
    La difficulté devrait être d'embellir le bouton de téléchargement <input type="file" name="file" id="file" />.

    répondre
    0
  • 大家讲道理

    大家讲道理2017-05-16 13:05:32

    ajaxupload

    Jetez un œil à ce plug-in
    Le backend le traitera normalement une fois l'image enregistrée avec succès, renverra l'adresse de l'image, puis remplacera l'adresse de l'image sur la page

    . 
    <html>  
    <head>  
        <title>ajaxupload上传</title>  
        <meta charset="utf-8"/>  
        <style type="text/css">  
            .pMain{  
                position:absolute;  
                width:140px;  
                height:100px;  
                padding-left:60px;  
                padding-top:40px;  
            }  
            #upload{  
                width:150px;  
                height:30px;  
            }  
            .content{  
                width:300px;  
                height:200px;  
            }  
        </style>  
        <script type="text/javascript" src="./jquery.1.8.js"></script>  
        <script type="text/javascript" src="./ajaxupload.js"></script>  
    </head>  
    <body>  
        <p><img id='face' src='pic.jpg'></p>
        <p class="pMain">  
            <button id="upload">文件上传</button>  
            <p class="content"></p>  
        </p>  
    </body>  
    <script type="text/javascript">  
        /*  
                ajaxupload上传  
            */  
           $(document).ready(function(){  
                var button = $('#upload'), interval;  
                var fileType = "all",fileNum = "one";   
                new AjaxUpload(button,{  
                    action: './upload.php',  
                    name: 'userfile',  
                    onSubmit : function(file, ext){  
                        if(fileType == "pic")  
                        {  
                            if (ext && /^(jpg|png|jpeg|gif)$/.test(ext)){  
                                this.setData({  
                                    'info': '文件类型为图片'  
                                });  
                            } else {  
                                $('<li></li>').appendTo('.files').text('非图片类型文件，请重传');  
                                return false;                 
                            }  
                        }  
                        button.text('文件上传中');  
                        if(fileNum == 'one')  
                            this.disable();  
                        interval = window.setInterval(function(){  
                            var text = button.text();  
                            if (text.length < 14){  
                                button.text(text + '.');                      
                            } else {  
                                button.text('文件上传中');               
                            }  
                        }, 200);  
                    },  
                    onComplete: function(file, response){//上传成功的函数；response代表服务器返回的数据  
                            //清楚按钮的状态  
                            button.text('文件上传');  
                            window.clearInterval(interval);  
                            this.enable();  
                            //修改下方p的显示文字  
                        if('success'==response.status){  
                            $('#face').attr('src',response.path);//修改头像路径
                            $(".content").text("上传成功");  
                        }else{  
                            $(".content").text("上传失败");  
                        }  
                    }  
                    });  
            });  
    </script>  
</html>

    J'ai modifié le code dans le lien

    répondre
    0
  • Annulerrépondre