Question

好的，所以我在使用用户可更改的个人资料图片创建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()"/>

Answer 1

预览图像

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]);
  }
}

代码改编自this answer Ivan Baev。

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;
}

通过this answer从Vision Hive改编的裁剪代码。

（JSFiddle）

保存

如果您尝试保存图像以便其他用户可以看到它，那么事情会变得复杂。特别是对于不同用户的不同图片，你需要某种数据库来跟踪配置文件和服务器端程序，以便在正确的时间显示正确的。如果您不熟悉服务器编程，可以找到所选语言的教程（或者如果您想坚持使用JavaScript，请参阅Node.js）。 StackOverflow很有可能获得如何接受您所用语言的图片上传的答案。服务器准备好接受图片后，请this answer Rudie查看如何从浏览器上传图片。

制作用户编辑的个人资料图片html

1 个答案:

预览图像

保存