Javascript Selecting Image To An Img Tag

I have a fake profile system for a class project, it requires a profile picture, and it needs an option to change it locally (from your hard drive). I have a working img tag that h

Solution 1:

You can try this by using file reader in javascript.

<divid="userphoto"><divclass="gravatar-wrapper-128"><imgid="image"src="body-img.jpg"alt=""class="logo"width="120"height="120"></div><divclass="change-picture-slide"style="top: 30px;"><inputaccept="image/*"type="file"id="upload"name="upload"onchange="readURL(this);"style="visibility: hidden;" /><ahref=""onclick="changePicture(); return false">Change Picture</a></div></div><script>functionchangePicture(){
            $('#upload').click();
        }
        functionreadURL(input)
        {
            if (input.files && input.files[0])
            {
                var reader = newFileReader();
                reader.onload = function (e)
                {
                    $('#image')
                    .attr('src',e.target.result);

                };
                reader.readAsDataURL(input.files[0]);
            }
        }



    </script>

Solution 2:

Well, the native file uploading interface (as I've found) doesn't allow you to do that, assuming you're only working client-side.

The only time that <input type="file"/> will ever be useful to you is in a form that is submitted to a server because browser security measures prevent you from doing anything else with it.

Modern browsers will give you a fake file path on the client side as the result of a file upload to prevent malicious acts with the user's filesystem.

However, I think the Ink Filepicker API provides exactly the functionality you're looking for. When the user uploads a file, it will return an object that contains the name of the file and a URL that points to its download location, which is exactly what you're looking for (this would fill the src attribute of your image).

It's really simple to set up, actually.

First, sign up for a free account and grab an API key. In your head, set it up like this:

<scripttype="text/javascript"src="//api.filepicker.io/v1/filepicker.js"></script><script>filepicker.setKey('API_KEY');</script>

Then, you have access to all of the API's functionality.

To do what you're asking, you'll need to create a button like this:

<buttononclick="handleFiles();">Upload Image</button>

Clicking on it will produce a dialog for the user to pick a file that looks like this:

Then, create a handler function:

<script>functionhandleFiles() {
        filepicker.pick({
            mimetypes: ['image/*'],
            //you can also define what uploading services you want to use here
        },
        function(e) { //you now have access to the filevar link = e.url;
            //change picturevar img = document.getElementById("image");
            img.src = link;            
        });
    }
</script>

I've found this to be a tremendously useful API: here are the docs.

Demo

Solution 3:

I believe the code is:

var link = document.getElementById('unpload').value;

Update after AstroCB's comment:

You could then use:

var link_split = link.split('\');
var link = link_split.length;

Or something similar I'm not 100% sure of the syntax maybe someone can help you out a bit more

Solution 4:

There's FileReader.readAsDataURL (see Indra's answer) and also window.URL.createObjectURL:

functionchangePicture() {
    //open the open file dialogdocument.getElementById('upload').click();
    document.getElementById('upload').onchange = function() {
        var file = this.files[0];
        var url = window.URL.createObjectURL(file);
        document.getElementById('image').src = url;
    };
}