How to browse the img src javascript

Question

Here is what i need to do. So i have this code

 <input type="file" id="uploadImage" name="image" />
    <input type="submit" id="ImageName" name="submit" value="Submit">

So when i click the "Choose.." button to browse an image, i want the path of that image to be saved in a variable.

Or basically what i need to do is to make this path to be src of an image.

$('#Imageholder').append('<img src="" class="ImgCoords" >');

Any ideas?

Sorry if the explanation is bad :

So, you want the user to select an image from their computer and then display it on the screen? — gen_Eric, Sep 25 '13 at 15:02
Maybe you can check out the w3c-specs for that: http://www.w3.org/TR/2012/WD-html5-20121025/the-input-element.html#dom-input-src :`attribute DOMString src;` — AvL, Sep 25 '13 at 15:04
Something like this: http://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded — Yuriy Galanter, Sep 25 '13 at 15:06

score 5 · Answer 1 · answered Sep 25 '13 at 15:06

Here is an example that i have made , adapt it to your need :

DEMO HERE

I added a button remove uploaded file,if you don't like show/hide effect just delete slow , Image is shown only on upload:

$('#blah').hide();
$('#remove').hide();  
function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#blah').attr('src', e.target.result);
            }

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

    $("#imgInp").change(function(){
        if( $('#imgInp').val()!=""){

            $('#remove').show();
            $('#blah').show('slow');
      }
        else{ $('#remove').hide();$('#blah').hide('slow');}
        readURL(this);
    });


    $('#remove').click(function(){
          $('#imgInp').val('');
          $(this).hide();
          $('#blah').hide('slow');
          $('#blah').attr('src','http://upload.wikimedia.org/wikipedia/commons/thumb/4/40/No_pub.svg/150px-No_pub.svg.png');
});

HTML Code:

<form id="form1">
    <input type='file' id="imgInp" name='image'/>
    <img id="blah" src="#" alt="your image" />
</form>

score 1 · Answer 2 · edited May 23 '17 at 12:24

1

If you are using HTML5,you can.

See here for the File API. by W3C

The below key line from API

  var file = document.getElementById('file').files[0];

But if you are not using HTML5

For security reasons you cannot do that.html doesn't have access to file system information.

MIght be useful :Preview an image before it is uploaded

edited May 23 '17 at 12:24

Community

1
1

answered Sep 25 '13 at 15:03

Suresh Atta

120,458
37
198
307

Thanks a million Yuriy Galanter that worked prefectly! @Suresh ATTA - I know about the security reasons thank you for your time :) – Kiril Velichkov Sep 25 '13 at 15:16
How to i do that SURESH? – Kiril Velichkov Sep 26 '13 at 07:46
Thanks Suresh, but the answer is not presented like this. The solution is what Yuriy Galanter said in the comment bow. He gave me a link there and the solution is inside the link. – Kiril Velichkov Sep 26 '13 at 07:51
I found it , i have upvoted his answer. Thanks again to everyone! – Kiril Velichkov Sep 26 '13 at 07:58

How to browse the img src javascript

2 Answers2