有這麼一個需求，要求使用者可以更換顯示的頭像。我的想法是這樣的：使用者先上傳頭像圖片，替換伺服器上的頭像圖片，然後刷新就是顯示更新後的圖片了。
問題是，JS怎麼實作上傳圖片到伺服器上，結合php或Nodejs
为情所困2017-05-16 13:05:32
寫個上傳文件的的表單即可
<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>再寫個處理文件的php
<?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";
}
?>仅有的幸福2017-05-16 13:05:32
http://www.jq22.com/jquery-in...參考著插件
轉成base64編碼，將編碼字串ajax到後端保存本地。上傳前最好等比例壓縮再上傳。
困難應該是上傳按鈕的美化上。
大家讲道理2017-05-16 13:05:32
ajaxupload
看看這個外掛
後端正常處理就行 圖片保存成功之後 返回圖片地址 然後 把頁面裡的圖片地址替換掉
<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>
改了下連結裡的程式碼