Here i want to get the Data from Excel File by using upload file control.My Snippet is
window.onload = function () {
var fileInput = document.getElementById('fup1');
var fileDisplayArea = document.getElementById('txt1');
fileInput.addEventListener('change', function (e) {
var file = fileInput.files[0];
var reader = new FileReader();
reader.onload = function (e) {
txt1.innerText = reader.result;
}
reader.readAsText(file);
});
}
when i run this code i get the data in below format
PK!q9+p��[Content_Types].xml ��(�̔MN�0��H�!�%n��j�?K��ؓƪc[���g��
P�T��DQ4���f��|[�d��9g#���Ni�����Cz���*a�����|v~6}�y���-欌��p���J`�
how can i resolve this please help me
First of all you have to understand what you are doing. You are taking a exel file( which is not in a txt format) converting it into fileStream( buffer of bytes) finally you are converting it into txt file( which was a exel file). So what do you expect the result.
Now try Solving this problem using two popular JavaScript libraries:
1. xls
2. xlsx
Which allow you to parse in pure JavaScript.
For Documentation of these two libraries you can refer to following link.
Documentation
Related
I need to read a file, which has no extension, in a web page and then encode this file in a QR code in binary mode.
In order to encode binary I found this library and I think is good: https://github.com/nayuki/QR-Code-generator/blob/master/javascript/qrcodegen.js
But for the first part, read a file and don't modify it or encode it as a text or something else, I am unable to understand how to do it.
What is the best choice? A success could be just read that file and allow the page to download the file I had read in order to check that is the same file.
ok, i handled correctly:
$("#pwbutton").click(function(e) {
e.preventDefault();
var file = document.getElementById('customFile').files[0];
var fr = new FileReader();
fr.onloadend = function(e) {
console.log(e.target.result);
var readed = e.target.result;
var QRC = qrcodegen.QrCode;
var segs = qrcodegen.QrSegment.makeSegments(String.fromCharCode.apply(null, new Uint8Array(e.target.result)));
var qr = QRC.encodeSegments(segs, QRC.Ecc.LOW, 19, 19, -1, true);
var canvas = document.getElementById("qrcode-canvas");
qr.drawCanvas(3, 0, canvas);
$('#qresult').show();
};
fr.readAsArrayBuffer(file);
});
I am using angular 1.7 with material design for my project. i am using angular material file input for this but it gives me result in file format. what i need is to convert that file format into base64 format. i have tried some external libraries but it doesn't work for me. can anyone post code or make a codepen/jsfiddle.
You can try this solution (this is o copy of this post: How to convert file to base64 in JavaScript? ):
function getBase64(file) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
console.log(reader.result);
};
reader.onerror = function (error) {
console.log('Error: ', error);
};
}
var file = /*Your file goes here*/
getBase64(file); // prints the base64 string
I have written the following code to read text from any csv or text file. However it sometimes reads successfully and stores in the variable and sometimes doesn't. Is there something missing in my code.
groupCsvData = [];
$('#add-group-upload').change(function() {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function(e) {
var text = reader.result;
groupCsvData = [text];
};
reader.readAsText(file);
)};
I am using the javascript file api to read a file and I want to get its type out. I am mainly using it to upload audio and video files. However when i upload amr, 3gp, and aac audio files, javascript can't figure out the filetype. I need to know the filetypes for the different audio formats as I use the files differently depending on the format. Is there anyway for me to figure out the format for the above mentioned files? I have supplied the code I use below.
var f = this.files[0];
var fr = new FileReader();
fr.onload = function (ev2) {
console.dir(ev2);
//$('#image').attr('src', ev2.target.result);
//extra[extra.length] = ev2.target.result;
extra[extra.length] = ev2.target.result;
var splitted = ev2.target.result.split(','); //get the type
fileType[fileType.length] = splitted[0];
console.log("splitted[0]: "+splitted[0]);
console.log("f.type: "+f.type);
};
fr.readAsDataURL(f);
regards
Try this code:Source
Demo
JSFiddle Example
var file = fileInput.files[0];
var textType = /text.*/;
if (file.type.match(textType)) {
var reader = new FileReader();
reader.onload = function(e) {
//onload code
}
reader.readAsText(file);
} else {
alert( "File not supported!");
}
or also this code:
var file = $("#inputFile")[0].files;
alert(file[0].type);
I've started playing around with the excellent http://blueimp.github.io/jQuery-File-Upload/ file upload project.
From the File Processing Options section of the documentation it seems that jquery.fileupload-process.js will let me parse and even modify the file's binary data (files array - with the result of the process applied and originalFiles with the original uploaded files)
(to parse, or append to it or encrypt it or to do something to it)
but for the life of me I can't seem to figure out where is the actual file data within the array so that I can pre-process it before it uploads.
What part of the data array has the "something.pdf" binary file in it? so that I can parse and transform it before upload?
//FROM: jquery.fileupload-process.js
//The list of processing actions:
processQueue: [
{
action: 'log'
}
],
add: function (e, data) {
var $this = $(this);
data.process(function () {
return $this.fileupload('process', data);
});
originalAdd.call(this, e, data);
}
},
processActions: {
log: function (data, options) {
console.log(data.files[0]); //Is it here?
console.log(data); //Is it here?
console.log(data.files[data.index]); //Is it here?
console.log(data.files[data.index].name); //Is it here?
//where?
Thank you.
The correct way to access the currently processed file is the following:
var file = data.files[data.index];
For browsers which support the File API, this is a File object.
To retrieve the actual File data, we have to use the FileReader interface:
var fileReader = new FileReader();
fileReader.onload = function (event) {
var buffer = event.target.result;
// TODO: Do something with the ArrayBuffer containing the file's data
};
fileReader.readAsArrayBuffer(file);
It may be useful, building on #Sebastian's answer, to explain where to put the FileReader, to work with the fileupload plugin. (I would have made this a comment on #Sebastian's answer, but didn't have space in the comment field).
I have built this in to the process action (using readAsText instead of readAsArrayBuffer) as follows:
alertText: function(data, options) {
var dfd = $.Deferred(),
file = data.files[data.index];
var fileReader = new FileReader();
fileReader.onload = function (event) {
var fileText = event.target.result;
alert('Text of uploaded file: '+ fileText);
};
fileReader.readAsText(file);
return dfd.promise();
}