Load a file using JavaScript

Question

I'm trying to load myself a file into my .js file, but I can't seem to find any code that explains it well enough. At the moment I have some code that will draw a flat triangle using webGL. Now I want to load up a model format (3DS, LAY, VW, OBJ etc etc), but I can't find any code to just load up a simple file and store itself inside a variable, now this javaScript file is used on a html file of course, but this html file won't be uploaded for random people to use, so there is no need to speak about the whole security file loading, all I want to try and do is load a local file into a variable, the file name will also be specified in the javaScript file anyways.

Just some simple text from a OBJ file

...
v  -0.3393 0.0000 -12.3639
v  1.8409 3.7515 -8.3253
v  2.8119 0.0000 -11.9490
v  -0.3393 3.7515 -8.6123
v  0.8700 -0.0000 -4.7016
v  -0.3393 -0.0000 -4.8608
...
vn -0.0000 0.0000 -1.0000
vn 0.0152 0.9983 -0.0567
...
vt 0.0000 0.0000 0.0000
vt 0.2500 0.0417 0.0000
...
f 1/1/1 2/2/2 3/3/3 
f 1/1/1 4/4/4 2/2/2

[tag:java] and [tag:javascript] are [**NOT** same](http://stackoverflow.com/questions/245062/whats-the-difference-between-javascript-and-java "What's the difference between JavaScript and Java?") — Shiplu Mokaddim, Dec 10 '12 at 23:28

score 2 · Accepted Answer · answered Dec 10 '12 at 23:56

2

Ajax, sir, is the way javascript "loads" text based files, on a wepbage.

I'd recommend a simple library to help you, as cross browser compatibility can be tricky.

Like say this one which uses the jQuery API for Ajax.

ajax({
  url: "/models/my_snazzy_model.obj",
  success: function(data) {
    console.log(data); // data is the text of your file. Woot!
  }
});

answered Dec 10 '12 at 23:56

Alex Wayne

178,991
47
309
337

Now have this piece of code function loadOBJ() { ajax({ url: "./Models/Torus.obj", success: function(data) { console.log(data); // data is the text of your file. Woot! } }); } but I still get this XMLHttpRequest cannot load file:///C:/Users/MrApproved/Documents/University/Year3/Ci312%20Graphics%20Algor/Lab%20Structure%2021%2010%202012/Models/Torus.obj. Origin null is not allowed by Access-Control-Allow-Origin. – Canvas Dec 11 '12 at 00:18
Depending on the browser, this may not work with the `file://` protocol. I would use a simple http server like [simple-server](https://github.com/balupton/simple-server) (via node.js) to bootup an http server to serve your project. – Alex Wayne Dec 11 '12 at 00:55
Tried the file://, so to load a simple file into JavaScript and just store it into a variable is impossible? only if you create a server and access that instead... Isn't HTML5 and JS the way forward in Internet Browsering??? I have even put my model file on my website server and told it to load that, and still NOPE not allowed... – Canvas Dec 11 '12 at 01:09
Browsers have security features, this is one of them. http://en.wikipedia.org/wiki/Same_origin_policy A local server is really easy to setup, and surely closer to how you will be serving this content later. – Alex Wayne Dec 11 '12 at 01:18
Ok i have just uploaded the file and with the obj file onto my web server, and now it works...but now I need to go ahead and read through all the data :), Cheers for the help, I understand the whole security issue you thing, but shouldn't they bring out a function that you can call at any part in the document so it knows it is only running in local host, and it can check the IP of the page being viewed which would be 127.0.0.1, but hey I'm not in command and I probably don't know enough so I'm probably talking poop. – Canvas Dec 11 '12 at 01:28
`python -m SimpleHTTPServer` is your friend. – gman Dec 11 '12 at 09:53

Load a file using JavaScript

1 Answers1