Community Learn Tools Library Leisure
search
English
javascript - Replace user avatar
ringa_lee
ringa_lee 2017-05-16 13:03:32
0
3
676

There is such a requirement that users can change the displayed avatar. My idea is this: the user first uploads the avatar image, replaces the avatar image on the server, and then refreshes to display the updated image.
The question is, how can JS upload images to the server, combined with php or Nodejs

ringa_lee
ringa_lee

ringa_lee

reply all(3)
为情所困
为情所困2017-05-16 13:05:32 3 floor

Just write a form to upload files

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

Write another php for file processing

<?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";
  }
?>
Like +0
Add Reply
仅有的幸福
仅有的幸福2017-05-16 13:05:32 2 floor

http://www.jq22.com/jquery-in... Refer to the plug-in
Convert to base64 encoding, and ajax the encoding string to the backend to save it locally. It is best to compress the file in equal proportions before uploading.
The difficulty should be beautifying the upload button <input type="file" name="file" id="file" />.

Like +0
Add Reply
大家讲道理
大家讲道理2017-05-16 13:05:32 1 floor

ajaxupload

Take a look at this plug-in
The backend will process it normally. After the image is successfully saved, return the image address and then replace the image address on the 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>

Changed the code in the link

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template