image - making user-edited profile pictures html -

okay, have been having trouble creating html site user-changeable profile picture. example, being able upload , change profile picture on social media. i'm rather new, not complete noob. so, please keep terms plain-ish. i've tried many methods, can't put code down revision, here's thought should work:

<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 picture</div> <center>     <div id="edit" contenteditable="true" style="text-size:150%"> </center> <input type="button" value="save changes" onclick="saveedits()"/> 

previewing image

html:

<img id="profile-pic" alt="profile picture" /> <h2>   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 base64-encoded url contains image data       document.getelementbyid('profile-pic').setattribute('src', e.target.result);     };     reader.readasdataurl(this.files[0]);   } } 

code adapted this answer ivan baev.

css:

#profile-pic {   float: left;   margin-right: 20px;   /* if want crop image size, use */   object-fit: cover;   width: 100px;   height: 100px; } 

cropping code adapted this answer vision hive.

(jsfiddle)

saving it

if you're trying save image other users see it, things complicated. different pictures different users, you'd want sort of database keep track of profiles , server-side program display right 1 @ right time. if you're new server programming, can find tutorials language of choice (or if want stick javascript, see node.js). there's chance stackoverflow has answer how accept image uploads in language. once server ready accept image, take @ this answer rudie how upload browser.