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
为情所困2017-05-16 13:05:32
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";
}
?>仅有的幸福2017-05-16 13:05:32
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" />.
大家讲道理2017-05-16 13:05:32
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('非图片类型文件，请重传');
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>
Changed the code in the link