How to get byte array from input type file using javascript

Question

I am generating my Html page from database (html tags are stored in database) using sql-server functions .. when generating controls I am easily able to deal with all type input controls but in case of input type "file" I am unable to get bytes of uploaded Image/File , i have a requirement of saving file/image byte into DB . Requirement -- How to get imagebytes from input type File using JavaScript , from onclick event of a input type button ...

Could you give an output of image from database? Here is a good article about image file inputs but I don't know, will it help in your case: html5rocks.com/en/tutorials/file/dndfiles — Anton
– Anton, Commented Mar 27, 2014 at 7:53

Jakub · Accepted Answer · 2017-06-26 12:22:56Z

22

This took me 8 hours to figure out lol. Here you go :)

function submitForm() {
   var fileList = document.getElementById("image").files;
   var fileReader = new FileReader();
   if (fileReader && fileList && fileList.length) {
      fileReader.readAsArrayBuffer(fileList[0]);
      fileReader.onload = function () {
         var imageData = fileReader.result;
      };
   }
}

edited Jun 26, 2017 at 12:22

Jakub

2,1593 gold badges28 silver badges62 bronze badges

answered Jun 12, 2015 at 22:07

sellmaurer

3012 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alex Zanfir Over a year ago

how did you convert from ArrayBuffer to [] byte?

MurugananthamS Over a year ago

but the onload called after some time only

Collectives™ on Stack Overflow

How to get byte array from input type file using javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related