CODEWITHSUNDEEP
jqueryimageappend
Timo Vossen
Timo Vossen

Reputation: 323

load img file into img tag with jQuery

HTML:

<input type="file" id="myFile">
<button id="pushKnop" type="button">Push</button>

jQuery:

if($('#myFile').val() != ""){
        e.preventDefault();
        pushNummer++;
        var push_structure2 = $('<br><div class="push"><a href="profiel.html"><div id="pushPersoon"><img src="img/pf.jpg"/><h1>Martijn Garritsen:</h1></div></a><div class="pushTextStuk pushNummer' + pushNummer + '"><p class="pushNummer"></p></div></div>');
        $('#pushesKader').prepend(push_structure2);
        $('.pushNummer' + pushNummer).append('<img src=" " id="pushFoto'+pushNummer+'"/>');
      }

So if someone would choose a file and hit the button there would appear a new div on the website with a <img> tag in it but now I'm looking for a way to get the file(this would be a img) they have chosen to be displayed in that div, so to get it inside the src="" in the img tag.

This is what I have so far:

$('#myFile').on('change', function(){
      var input = $(this)[0];
      var file = input.files[0];
      var reader = new FileReader();
        reader.readAsDataURL(file);
      reader.onload = function(e){
         $('#pushFoto' + pushNummer).attr('src', e.target.result);
       }
    });

Upvotes: 1

Views: 2273

Answers (3)

Ibrahim Khan
Ibrahim Khan

Reputation: 20750

You don't need to add change event of #myFile. You can do it like following. Hope this will help you.

var pushNummer = 0;
$('#pushKnop').click(function() {
        if ($('#myFile').val() != "") {
            pushNummer++;
            var push_structure2 = $('<br><div class="push"><a href="profiel.html"><div id="pushPersoon"><img src="img/pf.jpg"/><h1>Martijn Garritsen:</h1></div></a><div class="pushTextStuk pushNummer' + pushNummer + '"><p class="pushNummer"></p></div></div>');
            $('#pushesKader').prepend(push_structure2);
            $('.pushNummer' + pushNummer).append('<img src="" id="pushFoto' + pushNummer + '"/>');

            var file = document.getElementById('myFile').files[0];
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function (e) {
                $('#pushFoto' + pushNummer).attr('src', e.target.result);
            };
        }
});

Upvotes: 1

Furqan Aziz
Furqan Aziz

Reputation: 1104

Hope this will work

$('#pushKnop').on("click", function(e){
  if($('#pushTextVeld').val() != ""){
    e.preventDefault();
    pushNummer++;
    var push_structure = $('<br><div class="push"><a href="profiel.html"><div id="pushPersoon"><img src="img/pf.jpg"/><h1>Martijn Garritsen:</h1></div></a><div class="pushTextStuk pushNummer' + pushNummer + '"><p class="pushNummer"></p></div></div>');
    $('#pushesKader').prepend(push_structure);
    $('.pushNummer' + pushNummer).append($('#pushTextVeld').val());
    $('#pushTextVeld').val("");
  }

  if($('#myFile').val() != ""){
    e.preventDefault();
    pushNummer++;
    var push_structure2 = $('<br><div class="push"><a href="profiel.html"><div id="pushPersoon"><img src="img/pf.jpg"/><h1>Martijn Garritsen:</h1></div></a><div class="pushTextStuk pushNummer' + pushNummer + '"><p class="pushNummer"></p></div></div>');
    $('#pushesKader').prepend(push_structure2);
    $('.pushNummer' + pushNummer).append('<img src=" " id="pushFoto'+pushNummer+'"/>');

    // Add below code here
    var input = $('#myFile')[0];
    var file = input.files[0];
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(e){
      $('#pushFoto' + pushNummer).attr('src', e.target.result);
    }
  }
});

//Remove the below Code
/*$('#myFile').on('change', function(){
  var input = $(this)[0];
  var file = input.files[0];
  var reader = new FileReader();
    reader.readAsDataURL(file);
  reader.onload = function(e){
    console.log(pushNummer);
     $('#pushFoto' + pushNummer).attr('src', e.target.result);
   }
 });*/

Upvotes: 0

Gijsbert Brouwer
Gijsbert Brouwer

Reputation: 698

I think you are trying to use a data URL inside an img tag.

First read: https://css-tricks.com/data-uris/

But if you wish to use the image tag:

so your code would look like:

reader.onload = function(e){
    $('#pushFoto' + pushNummer).attr('src','data:image/gif;base64,' + e.target.result);
}

Upvotes: 0

Related Questions