制作用户编辑的个人资料图片
提问于 2016-11-05 18:00:43
好吧，所以我在创建一个带有用户可更改头像的HTML站点时遇到了麻烦。例如，能够在社交媒体上上传和更改您的个人资料图片。我是个新手，但不完全是菜鸟。所以，请保持简明的条款。我已经尝试了很多方法，所以我真的不能把任何代码放下来进行修改，但我认为应该这样做：
<p><img src="my_file" alt="my_file" style="float:left;width:100px;height:100px;">Your Profile Picture</p>
<input type="file" name="my_file" id="my-file">
<div id="update"> - Save your Picture</div>
<center>
<div id="edit" contenteditable="true" style="text-size:150%">
</center>
<input type="button" value="Save changes" onclick="saveEdits()"/>
回答 1
Stack Overflow用户
发布于 2016-11-05 20:30:43
预览图像
HTML：
<img id="profile-pic" alt="Profile picture" />
<h2>
Your profile picture
</h2>
<input type="file" id="my-file" />
<br>
<input type="button" value="Save changes" id="save" />JavaScript：
document.getElementById("my-file").onchange = function() {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
// e.target.result is a base64-encoded url that contains the image data
document.getElementById('profile-pic').setAttribute('src', e.target.result);
};
reader.readAsDataURL(this.files[0]);
}
}由Ivan Baev改编自this answer的代码。
CSS：
#profile-pic {
float: left;
margin-right: 20px;
/* If you want to crop the image to a certain size, use something like this */
object-fit: cover;
width: 100px;
height: 100px;
}由Vision Hive从this answer改编的裁剪代码。
(JSFiddle)
保存它
如果你想保存图片以便其他用户看到，事情就变得复杂了。特别是对于不同用户的不同图片，您可能需要某种数据库来跟踪配置文件，并需要一个服务器端程序在正确的时间显示正确的图片。如果您是服务器编程的新手，可以找到您选择的语言的教程(或者如果您想坚持使用JavaScript，请参阅Node.js)。对于如何接受你的语言的图片上传，StackOverflow有一个很好的答案。一旦您的服务器准备好接受图像，请查看Rudie的this answer，了解如何从浏览器上传图像。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40441482
复制相关文章
腾讯云开发者
