0

I have been working on the upload page for text files, now I would like to upload excel files as well. My current code give me weird output. I assume something is wrong since my function was built for text files and now I have to modify something to read excel files. Here is my file reader code:

function fileSubmit(){
    var fileExist = $('#fileUpload')[0];
    var fileName = $('#fileUpload').val().split('\\').pop();

    if(fileName && fileExist){
        var reader = new FileReader();
        var file = fileExist.files[0];

        reader.onload = function(e) {
            var text = reader.result.split(/\r\n|\n/);                 
            var columnNames = text.shift().split('\t'); 
            alert(columnNames); 
        }
        reader.readAsText(file, 'UTF-8');
    }
}

My alert output looks like this:

PK!b�h^�[Content_Types].xml �(����N�0E�H�C�-Jܲ@5��*Q>�ēƪc[�ii����B�j7���{2��h�nm���ƻR����U^7/���%��rZY�@1__�f��q��R4D�AJ�h>����V�ƹ�Z�9����NV�8ʩ����ji){^��-

I want to output my columns names because I have to do the validation for each row in the file. What is the best way to get this to work for .xsl and .xsls files? I found many examples with xls and xlxs javascript libraries but none of them worked when I tried to implement for many reason. I'm wondering is there anything that is supported in all browsers or this is something that should not be done in JavaScript? Thank you.

espresso_coffee
  • 5,980
  • 11
  • 83
  • 193
  • 1
    An excel file is not just a standard text file, and can not be read as such. There is some encoding applied to the file - which is the reason for the garbage output. – Matt Clark Nov 18 '16 at 18:52
  • 3
    Possible duplicate of [How to parse Excel file in Javascript/HTML5](http://stackoverflow.com/questions/8238407/how-to-parse-excel-file-in-javascript-html5) – Daniel Lizik Nov 18 '16 at 18:52
  • None of these answers/functions working. I tried one that is accepted as an answer and I'm getting error 'Bolb'. – espresso_coffee Nov 18 '16 at 19:43
  • xlsx and xsl are both diffrent internally – KishanCS Dec 07 '16 at 03:20

2 Answers2

1

xlsx is internally xml files which is group of files together which is combined as xlsx .To check it open with zip and you can have a better view of what xlsx files are made of.

Xlsx Internally is [Opened with ZIP]

_

rels
docProps
xl
[content_types].xml

So these files internally work having dependent on relations. It is never a good practice to read xlsx file as text file. There are other methods you can read it using Apache poi library. Try it.And thank you...

KishanCS
  • 1,357
  • 1
  • 19
  • 38
0

You can use XMLHttpRequest and FormData for uploading a file,

$('#input-file').change(function() {

      var url = '/back-end-url';
      var form_data = new FormData();
      var xhr = new XMLHttpRequest();

      $.each(this.files, function (key, value) {
          form_data.append('file', value)
      })

      xhr.open('POST', url, true)
      xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest")
      xhr.send(form_data)

      xhr.onreadystatechange(function() {
          if(xhr.readyState == XMLHttpRequest.DONE) {
               var res = JSON.parse(xhr.responseText)
          }
      })

})

You can get & handle the file in back-end.

Hariprakash Sambath
  • 159
  • 1
  • 5