cari

Rumah  >  Soal Jawab  >  teks badan

javascript - Gantikan avatar pengguna

Terdapat keperluan sedemikian bahawa pengguna boleh menukar avatar yang dipaparkan. Idea saya ialah ini: pengguna mula-mula memuat naik imej avatar, menggantikan imej avatar pada pelayan, dan kemudian memuat semula untuk memaparkan imej yang dikemas kini.
Persoalannya, bagaimana JS boleh memuat naik imej ke pelayan, digabungkan dengan php atau Nodejs

ringa_leeringa_lee2741 hari yang lalu680

membalas semua(3)saya akan balas

  • 为情所困

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

    Hanya tulis borang untuk memuat naik fail

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

    Tulis php lain untuk pemprosesan fail

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

    balas
    0
  • 仅有的幸福

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

    http://www.jq22.com/jquery-in... Rujuk pada pemalam
    Tukar kepada pengekodan base64 dan ajax rentetan pengekodan ke hujung belakang untuk menyimpannya secara setempat. Adalah lebih baik untuk memampatkan fail dalam perkadaran yang sama sebelum memuat naik.
    Kesukaran harus mencantikkan butang muat naik <input type="file" name="file" id="file" />.

    balas
    0
  • 大家讲道理

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

    ajaxupload

    Lihat pemalam ini
    Hujung belakang akan memprosesnya seperti biasa Selepas imej berjaya disimpan, kembalikan alamat imej dan kemudian gantikan alamat imej pada halaman

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

    Tukar kod dalam pautan

    balas
    0
  • Batalbalas