有这么一个需求，要求用户可以更换显示的头像。我的想法是这样的：用户先上传头像图片，替换服务器上的头像图片，然后刷新就是显示更新后的图片了。
问题是，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到后端保存本地。上传之前最好等比例压缩再上传。
难点应该是上传按钮<input type="file" name="file" id="file" />的美化上。
大家讲道理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>
改了下链接里的代码