kschaeffler kschaeffler - 9 months ago 53
jQuery Question

Get data from file input in JQuery

I actually have a file input and I would like to retrieve the Base64 data of the file.

I tried:


to retrieve the data. But it only provides the name, the length, the content type but not the data itself.

I actually need these data to send them to Amazon S3

I already test the API and when I send the data through html form with encode type "multipart/form-data" it works.

I use this plugin : http://jasny.github.com/bootstrap/javascript.html#fileupload

And this plugins gives me a preview of the picture and I retrieve data in the src attribute of the image preview. But when I send these data to S3 it does not work. I maybe need to encode the data like "multipart/form-data" but I don't know why.

Is there a way to retrieve these data without using an html form?


you can try FileReader API something like this.

<!DOCTYPE html>
  function handleFileSelect()
    if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
      alert('The File APIs are not fully supported in this browser.');

    input = document.getElementById('fileinput');
    if (!input) {
      alert("Um, couldn't find the fileinput element.");
    else if (!input.files) {
      alert("This browser doesn't seem to support the `files` property of file inputs.");
    else if (!input.files[0]) {
      alert("Please select a file before clicking 'Load'");               
    else {
      file = input.files[0];
      fr = new FileReader();
      fr.onload = receivedText;

  function receivedText() {

<input type="file" id="fileinput"/>
<input type='button' id='btnLoad' value='Load' onclick='handleFileSelect();'>
<div id="editor"></div>