2

You create a browse button and let the user navigate the directory until he chooses a file. And the whole path and file name appear in the text element of the Browse button complex. So, how can I open that file to extract the data and act on it?

Here is how far I got with this:

    <div id="browseFile" style="z-index: 1; left:-1040px; width:400px">
        <input id="browse4File" name="/static/Import/Example Portfolio 1.csv" type="file" accept="text/plain" maxlength="200" style="left:20px; width: 200px;" /><br/>
        <span style="position:relative;top:72px; left:320px; top:73px;">
            <!--<button type="button" onclick="javascript:importFile()" style="font-size:16px;">Save</button>-->
            <button type="button" onclick="javascript:u=document.getElementById('browse4File').value ;alert(u);" style="font-size:16px;">Save</button>
        </span>
    </div>

And the Alert() does show the file name, but it does not show the path. Security issue... no problem! But how can I open this file? Do I send it to the back end? I use Python on my server with cherrypy.

Or can JavaScript extract the contents of the file?

Please help...

TIA

DKean

DKean
  • 1,647
  • 5
  • 17
  • 26

1 Answers1

2

With html 4 it is not possible, with html 5 you can use file API. check out browser support here

Ex:

function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }

      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
          var span = document.createElement('span');
          span.innerHTML = ['<img class="thumb" src="', e.target.result,
                            '" title="', escape(theFile.name), '"/>'].join('');
          document.getElementById('list').insertBefore(span, null);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);

Demo: Fiddle

Arun P Johny
  • 365,836
  • 60
  • 503
  • 504
  • I do not see anything more than what I have done. Your code makes sense to me, but in the Fiddle it does not output any content of the file! – DKean Mar 08 '13 at 01:02
  • Oh, I see, you wired it for images only! Got it. Now, I have to wire it for Text only! I see you got that code from http://www.html5rocks.com/en/tutorials/file/dndfiles/ – DKean Mar 08 '13 at 01:09
  • @DKean look at the sample in http://www.htmlgoodies.com/beyond/javascript/read-text-files-using-the-javascript-filereader.html#fbid=W2L82kvPgXG to see how to read text file – Arun P Johny Mar 08 '13 at 03:13
  • I did and it fails with FireFox. So that is pretty useless, since my users use FF most of the time. – DKean Mar 08 '13 at 12:05