Best IT Recipes

Get data from file input in jQuery

I have a file, and I would like to receive the data of a Base64 file.

I tried:

$('input#myInput')[0].files[0]

to retrieve data. But it contains only the name, length, type of content, but not data.

I really need this data to send it to Amazon S3

I have already tested the API and when I submit data via the html form with the encoding type "multipart / form-data", it works.

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

And these plugins give me a preview image, and I get the data in the src attribute of the image preview. But when I send this data to S3, it will not work. Maybe I need to encode data like "multipart / form-data", but I don't know why.

Is there any way to get this data without using the html form?

+69
jquery file html-input base64 file-upload
Sep 05
source share
6 answers

you can try FileReader API something like this.

 <!DOCTYPE html> <html> <head> <script> function handleFileSelect() { if (!window.File || !window.FileReader || !window.FileList || !window.Blob) { alert('The File APIs are not fully supported in this browser.'); return; } 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; //fr.readAsText(file); fr.readAsDataURL(file); } } function receivedText() { document.getElementById('editor').appendChild(document.createTextNode(fr.result)); } </script> </head> <body> <input type="file" id="fileinput"/> <input type='button' id='btnLoad' value='Load' onclick='handleFileSelect();'> <div id="editor"></div> </body> </html>
+85
Sep 05 '12 at 13:08
source share

input file element:

 <input type="file" id="fileinput" />

get file:

 var myFile = $('#fileinput').prop('files');
+87
Oct 30 '13 at 19:42
source share

I created a form data object and added a 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 sent headers. I can confirm this because my file was sent and saved in a folder on my server. If you do not know how to use the FormData object, there is some documentation on the Internet, but not so much. Explain form data object via Mozilla

+31
Oct 23 '13 at 14:28
source share

FileReader API with jQuery, a simple example.

 ( function ( $ ) { // Add click event handler to button $( '#load-file' ).click( function () { if ( ! window.FileReader ) { return alert( 'FileReader API is not supported by your browser.' ); } var $i = $( '#file' ), // Put file input ID here input = $i[0]; // Getting the element from jQuery if ( input.files && input.files[0] ) { file = input.files[0]; // The file fr = new FileReader(); // FileReader instance fr.onload = function () { // Do stuff on onload, use fr.result for contents of file $( '#file-content' ).append( $( '<div/>' ).html( fr.result ) ) }; //fr.readAsText( file ); fr.readAsDataURL( file ); } else { // Handle errors here alert( "File not selected or browser incompatible." ) } } ); } )( jQuery ); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="file" id="file" /> <input type='button' id='load-file' value='Load'> <div id="file-content"></div>

Read as text ... uncomment //fr.readAsText(file); line and comment fr.readAsDataURL(file);

+6
Sep 27 '16 at 9:22
source share
  <script src="~/fileupload/fileinput.min.js"></script> <link href="~/fileupload/fileinput.min.css" rel="stylesheet" />

Download the above files with the name fileinput, add the path to 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>
+1
May 30 '17 at 23:33
source share

Html:

 <input type="file" name="input-file" id="input-file">

JQuery

 var fileToUpload = $('#input-file').prop('files')[0];

We want to get only the first element, because prop ('files') returns an array.

0
Sep 20 '17 at 21:14
source share


More articles:


All Articles