CODEWITHSUNDEEP
jqueryhtmlfileinput
guradio
guradio

Reputation: 15565

get data file from input text jquery

How to get data like this: 

data:application/pdf;base64,JVBERi0xLjQKJeHp69MKMSAwIG9iago8PC9UeXBlIC9DYXR…AKdHJhaWxlcgo8PC9TaXplIDE4Ci9Sb290IDEgMCBSPj4Kc3RhcnR4cmVmCjg4MzEzCiUlRU9G

from input file

$('#file').change(function(e) {
  var file = $('#file')[0].files;
  for (var i = 0; i < file.length; i++) {
    console.log(file[i].name)
    console.log(file[i].type)
    console.log(file[i].size)
  }



});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="file" id="file" name="file" multiple="">

I got the sample like 

function readURL(input) {
    var reader = new FileReader();
    reader.onload = function(e) {
        console.log(e.target.result)
    };
    reader.readAsDataURL(input);
}

I need to get it from on change of input file because i want to put it in the href of an anchor like

<a class="image" href=' + e.target.result + '><img style="width:150px; height:150px;" u="image" src=' + e.target.result + '></a>

so that my code looks like 

$('#file').change(function(e) {
    var file = $('#file')[0].files;
    for (var i = 0; i < file.length; i++) {
        $('body').append('<a class="image" href=' + e.target.result + '><img style="width:150px; height:150px;" u="image" src=' + e.target.result + '></a>')
    }
});

Upvotes: 2

Views: 1254

Answers (1)

A. Wolff
A. Wolff

Reputation: 74410

What you want is adding anchor once you get the data file(s) available. The easiest way it to append these elements from reader onload event. See e.g:

function readURL(input) {
    var reader = new FileReader();
    reader.onload = function(e) {
         // here data is available, you can append it
         $('body').append('<a class="image" href=' + e.target.result + '><img style="width:150px; height:150px;" u="image" src=' + e.target.result + '></a>')
    };
    reader.readAsDataURL(input);
}

$('#file').change(function(e) {

    var files = $('#file')[0].files;

    for (var i = 0; i < files.length; i++) {
         readURL(files[i]);       
    }
});

Upvotes: 2

Related Questions