How to display the content of a local file in browser using java script ( code to be compatible for all browsers)?

Question

I am planning to create a application on my local . I need a javascript code that to render the content from whichever file I am selecting from my system using html file-upload input box. Referred to the below link but http://www.alecjacobson.com/weblog/?p=1645 where the code is not compatible for other browsers,

Thanks in Advance

I don't think there are any clean cross-browser solutions for this as of now. — techfoobar
– techfoobar, Commented Oct 31, 2012 at 11:34
@aSanthosh: I think the File API's are supported in IE 10 and in latest safari .As the link says it's already supported in chrome and firefox so this should be compatible with all browsers. — karthick
– karthick, Commented Oct 31, 2012 at 12:12

nicoabie · Accepted Answer · 2012-10-31 12:54:36Z

1

For security reasons you can't open a file from the browser. What you can actually do is upload it to the server and then write it back to the page. To upload the file I suggest you uploadify or jquery upload.

You are welcome.

If you don't care about the cross-browsing support then:

<input id="file" type="file" multiple="" onchange="startRead()">

<pre><code id="output"></code></pre>


function startRead() {
    //obtain input element through DOM  
    var file = document.getElementById('file').files[0];
    if (file) {
        getAsText(file);
    }
}
function getAsText(readFile) {
    var reader;
    try {
        reader = new FileReader();
    } catch (e) {
        document.getElementById('output').innerHTML = "Error: seems File API is not supported on your browser";
        return;
    }
    // Read file into memory as UTF-8      
    reader.readAsText(readFile, "UTF-8");
    // handle success and errors

    reader.onload = loaded;
    reader.onerror = errorHandler;
}

function loaded(evt) {
    // Obtain the read file data    
    var fileString = evt.target.result;
    document.getElementById('output').innerHTML = fileString;
}
function errorHandler(evt) {
    if (evt.target.error.code == evt.target.error.NOT_READABLE_ERR) {
        // The file could not be read
        document.getElementById('output').innerHTML = "Error reading file..."
    }
}

edited Oct 31, 2012 at 12:54

answered Oct 31, 2012 at 11:41

nicoabie

2,9341 gold badge22 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Quentin Over a year ago

The question includes a link to a guide which does it is possible!

nicoabie Over a year ago

@Quentin, aSanthosh asks for "How to display the content of a local file in browser using java script ( code to be compatible for all browsers)?", the only way it to be cross-browser compatible is to do it the old way, not using the file api.

IoI.hong · Accepted Answer · 2012-10-31 13:51:16Z

0

We are developing kinds of web-based GUI editor. This issue have been the problem for long time.

As I know, the method in the site you mentioned is the only way. We are using HTML5 File System.

Before this, We've considered using kinds of Flash module, local web server, dropbox, ...

answered Oct 31, 2012 at 13:51

IoI.hong

761 bronze badge

Collectives™ on Stack Overflow

How to display the content of a local file in browser using java script ( code to be compatible for all browsers)?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related