Can't figure out How to change the input file to an static folder file

Question

I have a 'stolen' code here, which i want to change the input sector to a file in my folder on the server without uploading the file first. The problem is that I am a little bit bad in javascript to figure it out, how to change the code to do that. Thanks for any help.

<script src="jquery-2.1.4.min.js"></script>
<script lang="javascript" src="xlsx.full.min.js"></script>


<input type="file" id="input-excel" src="test.xslx"/>
<div id="wrapper">
</div>

<script>
  $('#input-excel').change(function(e){
  reader.readAsArrayBuffer(e.target.files[0]);
            reader.onload = function(e) {
                    var data = new Uint8Array(reader.result);
                    var wb = XLSX.read(data,{type:'array'});
                    //var htmlstr = XLSX.write(wb,{sheet:"Kondensatoren", type:'binary',bookType:'html'});
                    var htmlstr = XLSX.write(wb,{sheet:"Tabelle1", type:'binary',bookType:'html'});
                    $('#wrapper')[0].innerHTML += htmlstr;
            }
    });
</script>

_"file in my folder on the server without uploading the file first"_ You want to use a file from a particular folder from your server that you haven't put there yet? How are you supposed to use a file that doesn't exist yet? Or are you meaning you want to preview a local file before uploading? If it is the latter what problems are you experiencing? Note with the code you show you haven't created the `reader` variable yet — Patrick Evans, Nov 08 '18 at 22:38
@PatrickEvans Sorry for my confusing talking. the files are on the server, so the preview would be cool. The problem is that i am a big noob atm in javascript =( and i cant figure out how to change the struct so, that i dont need the input section for the file. No i didnt, because it is in the written xlsx.full.min.js or jquery-2.1.4.min.js at the beginning. — Eduard Tester, Nov 09 '18 at 11:13
@Herohtar sry dude. cant say it exactly. i am atm just a scriptkiddie who try to figure out how some functions work to change it to his own needing form. i began to lern javascript, but i need also to do some other stuff by side =/ — Eduard Tester, Nov 09 '18 at 11:16
So basically you were wanting to do an AJAX request, which kind of makes this a duplicate of https://stackoverflow.com/questions/8567114/how-to-make-an-ajax-call-without-jquery — Herohtar, Nov 09 '18 at 16:17

Tallboy · Answer 1 · 2018-11-08T22:44:15.823

Your question is confusing, but here is how to use AJAX to request a file on your server without the person needing to upload the file first.

What you do with it is still up to you.

I notice it's a xslx file which isn't easily parsed like a CSV, so for your ajax request you will need to parse binary.

var oReq = new XMLHttpRequest();
oReq.open("GET", "test.xslx", true);
oReq.responseType = "arraybuffer";

oReq.onload = function(oEvent) {
  var arrayBuffer = oReq.response;

  // if you want to access the bytes:
  var byteArray = new Uint8Array(arrayBuffer);
  // ...

  // create a new blob (change type to whatever)
  var blob = new Blob(arrayBuffer, {type: "image/png"});

  // whatever...
};

oReq.send();

score 0 · Accepted Answer · answered Nov 09 '18 at 11:41

Thx @Tallboy. Just for other newbies as me. The full code is.

<script src="jquery-2.1.4.min.js"></script>
<script lang="javascript" src="xlsx.full.min.js"></script>
<div id="wrapper"></div>

<script>
  var oReq = new XMLHttpRequest();
  oReq.open("GET", "test.xlsx", true);
  oReq.responseType = "arraybuffer";

  oReq.onload = function(oEvent) {
    var arrayBuffer = oReq.response;
    var data = new Uint8Array(arrayBuffer);
    var wb = XLSX.read(data,{type:'array'});
    var htmlstr = XLSX.write(wb,{sheet:"Kondensatoren", type:'binary',bookType:'html'});
    $('#wrapper')[0].innerHTML += htmlstr;
  };
  oReq.send();
</script>

Can't figure out How to change the input file to an static folder file

2 Answers2