I actually have a file input and I would like to retrieve the Base64 data of the file.
I tried:
$('input#myInput')[0].files[0]
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?
This question is related to
jquery
file
file-upload
base64
html-input
FileReader API with jQuery, simple example.
( function ( $ ) {_x000D_
// Add click event handler to button_x000D_
$( '#load-file' ).click( function () {_x000D_
if ( ! window.FileReader ) {_x000D_
return alert( 'FileReader API is not supported by your browser.' );_x000D_
}_x000D_
var $i = $( '#file' ), // Put file input ID here_x000D_
input = $i[0]; // Getting the element from jQuery_x000D_
if ( input.files && input.files[0] ) {_x000D_
file = input.files[0]; // The file_x000D_
fr = new FileReader(); // FileReader instance_x000D_
fr.onload = function () {_x000D_
// Do stuff on onload, use fr.result for contents of file_x000D_
$( '#file-content' ).append( $( '<div/>' ).html( fr.result ) )_x000D_
};_x000D_
//fr.readAsText( file );_x000D_
fr.readAsDataURL( file );_x000D_
} else {_x000D_
// Handle errors here_x000D_
alert( "File not selected or browser incompatible." )_x000D_
}_x000D_
} );_x000D_
} )( jQuery );
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<input type="file" id="file" />_x000D_
<input type='button' id='load-file' value='Load'>_x000D_
<div id="file-content"></div>
_x000D_
To read as text... uncomment //fr.readAsText(file);
line and comment fr.readAsDataURL(file);
<script src="~/fileupload/fileinput.min.js"></script>
<link href="~/fileupload/fileinput.min.css" rel="stylesheet" />
Download above files named fileinput add the path i your index page.
<div class="col-sm-9 col-lg-5" style="margin: 0 0 0 8px;">
<input id="uploadFile1" name="file" type="file" class="file-loading"
`enter code here`accept=".pdf" multiple>
</div>
<script>
$("#uploadFile1").fileinput({
autoReplace: true,
maxFileCount: 5
});
</script>
Html:
<input type="file" name="input-file" id="input-file">
jQuery:
var fileToUpload = $('#input-file').prop('files')[0];
We want to get first element only, because prop('files') returns array.
input file element:
<input type="file" id="fileinput" />
get file :
var myFile = $('#fileinput').prop('files');
input
element, of type file
<input id="fileInput" type="file" />
On your input
change use the FileReader
object and read your input
file property:
$('#fileInput').on('change', function () {
var fileReader = new FileReader();
fileReader.onload = function () {
var data = fileReader.result; // data <-- in this var you have the file data in Base64 format
};
fileReader.readAsDataURL($('#fileInput').prop('files')[0]);
});
FileReader will load your file and in fileReader.result
you have the file data in Base64 format (also the file content-type (MIME), text/plain, image/jpg, etc)
I created a form data object and appended the file:
var form = new FormData();
form.append("video", $("#fileInput")[0].files[0]);
and i got:
------WebKitFormBoundaryNczYRonipfsmaBOK
Content-Disposition: form-data; name="video"; filename="Wildlife.wmv"
Content-Type: video/x-ms-wmv
in the headers sent. I can confirm this works because my file was sent and stored in a folder on my server. If you don't know how to use the FormData object there is some documentation online, but not much. Form Data Object Explination by Mozilla
Source: Stackoverflow.com