亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Community

Learn

Tools Library

AI Tools

Leisure

English

javascript - Replace user avatar

ringa_lee 2017-05-16 13:03:32

786

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

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('非圖片類型文件，請(qǐng)重傳');  
                                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){//上傳成功的函數(shù)；response代表服務(wù)器返回的數(shù)據(jù)  
                            //清楚按鈕的狀態(tài)  
                            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