How to display uploaded image when user clicks on a button?

Question

I have the following line of code here which makes a user text appear upon clicking the send button (to simulate chat messages being sent)

<script>
    $('#subbut').click(function(){
        var user_msg = $("#user_msg").val();

        $("#msg").append('<p>User says:'+user_msg+'</p>');
</script>

<body>
    <div id="msg"></div>
    <input type="text" name="user_msg" id="user_msg">
    <input type="submit" value="Submit" id="subbut">
</body>

However I wish to do this for input of images too.

<body>
    <div id="msg"></div>
    <input type="file" name="newImage" id="upload-photo">
    <input type="submit" value="Submit" id="subbut">
</body>

How do you access the image and append it (to display the image) to the #msg div when the #subbut button is clicked? I've looked at something similar here Preview an image before it is uploaded but I can't seem to adapt it.

Your answer is here : https://stackoverflow.com/questions/12368910/html-display-image-after-selecting-filename — Chandan Kumar Thakur, Jun 21 '17 at 03:35
Sorry, forgot to add. I'm not sure about the parameter of the readURL(this) function. In my case, do I pass in the id readURL("#upload-photo") instead of readURL(this)? — chowsai, Jun 21 '17 at 03:45
Or you can use readURL(this) in the onchange function . jQuery('#upload-photo').onchange(function(){readURL(this);}); — Chandan Kumar Thakur, Jun 21 '17 at 03:51
http://jsfiddle.net/LvsYc/ not sure why when i replaced "this" with $("#imgInp") it doesnt work :( $("#imgInp").change(function(){ readURL(this); }); for testing purposes — chowsai, Jun 21 '17 at 04:15
(replying to your third comment) yeah that's one way but I do not want the user to see their uploaded photo prior to pressing the send button — chowsai, Jun 21 '17 at 04:18

bearwithbeard · Accepted Answer · 2017-06-21T04:42:19.730

1

<div id="image-wrapper"></div>
<input id="upload-image" type="file" accept=".jpg"/>
<input id="subbut" type="submit" value="Submit"/>

<script>
var _URL = window.URL || window.webkitURL;

$("#subbut").click(function () {
    var file;
    var image;
    if ((file = $("#upload-image")[0].files[0])) {
        image = new Image();
        image.onload = function () {
            $("#image-wrapper").append(this);
            $(this).attr("id", "image");
        }
        image.src = _URL.createObjectURL(file);
    }
});
</script>

edited Jun 21 '17 at 04:42

answered Jun 21 '17 at 03:45

bearwithbeard

303
3
10

Thank you. Btw i think you missed out the '#' sign on $("upload-image") and $("image-wrapper") – chowsai Jun 21 '17 at 04:32
@chowsai, ty for the notice – bearwithbeard Jun 21 '17 at 04:43

score 0 · Answer 2 · answered Jun 04 '18 at 10:41

<input type="file" id="inputFileToLoad" onchange="chnageimgupdate()" />

function loadImageFileAsURL()
{
    var filesSelected = document.getElementById("inputFileToLoad").files;
    if (filesSelected.length > 0)
    {
        var fileToLoad = filesSelected[0];

        if (fileToLoad.type.match("image.*"))
        {
            var fileReader = new FileReader();
            fileReader.onload = function(fileLoadedEvent) 
            {
                var imageLoaded = document.createElement("img");
                imageLoaded.src = fileLoadedEvent.target.result;
                document.body.appendChild(imageLoaded);
            };
            fileReader.readAsDataURL(fileToLoad);
        }
    }
}

How to display uploaded image when user clicks on a button?

2 Answers2