communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
javascript - Remplacer l'avatar de l'utilisateur
ringa_lee
ringa_lee 2017-05-16 13:03:32
0
3
684

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_lee
ringa_lee

ringa_lee

répondre à tous(3)
为情所困
为情所困2017-05-16 13:05:32 3 plancher

É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";
  }
?>
Comme +0
Ajouter une réponse
仅有的幸福
仅有的幸福2017-05-16 13:05:32 2 plancher

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" />.

Comme +0
Ajouter une réponse
大家讲道理
大家讲道理2017-05-16 13:05:32 1 plancher

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

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal