masyarakat
Belajar
Perpustakaan Alatan
Alat AI
Masa lapang
cari
Melayu
javascript - Gantikan avatar pengguna
ringa_lee
ringa_lee 2017-05-16 13:03:32
0
3
695

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

ringa_lee

membalas semua(3)
为情所困
为情所困2017-05-16 13:05:32 Tingkat 3

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";
  }
?>
Suka +0
Tambah Balasan
仅有的幸福
仅有的幸福2017-05-16 13:05:32 Tingkat 2

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

Suka +0
Tambah Balasan
大家讲道理
大家讲道理2017-05-16 13:05:32 Tingkat 1

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

Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan