1

I'm making a fake forum for a class project, and in the your profile tab, you have an option to change your profile picture. Since its a fake forum it involves no servers or actual uploading, ect.. so i am avoiding any php. what i want the upload link to do is open an OpenFileDialog restricted to just images (of which is does). when you press "Open" on the dialog, I want it to get the file location that they just opened into a var and set an img tag source as that var.

this is what I have so far

<div class="profile_picture">
    <a><img id="image" src="http://blog.ramboll.com/fehmarnbelt/wp-content/themes/ramboll2/images/profile-img.jpg" alt="" class="logo" width="120" height="120"></div></a>
        <div class="change-picture-overlay" style="top: 299px;">
        <div class="change-picture-slide" style="top: 30px;">
        <input accept="image/*" type="file" id="upload" name="upload" style="visibility: hidden; width: 1px; height: 1px" multiple />
        <a href="" onclick="changePicture(); return false">Change Picture</a>
    </div>
</div>


function changePicture() {
    //open the open file dialog
    document.getElementById('upload').click();
    //get the file location into a var
    var link = document.getElementById('upload').url; //this i know is not right

    //change picture
    var img = document.getElementById("image");
    img.src = link;
    return false;
}

thanks!

Bryce Hahn
  • 1,585
  • 4
  • 16
  • 26

1 Answers1

2

Modern browsers can access file contents via javascript using the HTML 5 file API:

https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

Check out this demo http://html5demos.com/file-api

Matthew Lock
  • 13,144
  • 12
  • 92
  • 130