How Can JavaScript Read Local File Contents in Different Browsers?

Reading File Contents on the Client-Side in JavaScript in Various Browsers

In an attempt to read file contents from a client machine using a browser, a script-only solution has been developed for Firefox and Internet Explorer. The solution leverages the File API for Firefox and an ActiveXObject for Internet Explorer.

File API for Firefox

function getFileContents() {
    var fileForUpload = document.forms[0].fileForUpload;
    var fileName = fileForUpload.value;

    if (fileForUpload.files) {
        var fileContents = fileForUpload.files.item(0).getAsBinary();
        document.forms[0].fileContents.innerHTML = fileContents;
    }
}

ActiveXObject for Internet Explorer

function ieReadFile(filename) 
{
    try
    {
        var fso  = new ActiveXObject("Scripting.FileSystemObject"); 
        var fh = fso.OpenTextFile(filename, 1); 
        var contents = fh.ReadAll(); 
        fh.Close();
        return contents;
    }
    catch (Exception)
    {
        return "Cannot open file :(";
    }
}

Cross-Browser Support

However, there is no known way to perform this task in other browsers, such as Safari and Chrome, using the above methods. The File API, as implemented in these browsers, provides only access to file name and file size, lacking the ability to read content.

File API Update

The File API has since been standardized and implemented in most modern browsers, including IE 10 onwards. This API supports asynchronous file reading, binary file handling, and text encoding decoding.

var file = document.getElementById("fileForUpload").files[0];
if (file) {
    var reader = new FileReader();
    reader.readAsText(file, "UTF-8");
    reader.onload = function (evt) {
        document.getElementById("fileContents").innerHTML = evt.target.result;
    }
    reader.onerror = function (evt) {
        document.getElementById("fileContents").innerHTML = "error reading file";
    }
}

WebKit and HTML 5 Proposal

Alternatively, if desired, one could submit a patch or propose the Mozilla API for inclusion in HTML 5, increasing the likelihood of cross-browser compatibility in the future.

The above is the detailed content of How Can JavaScript Read Local File Contents in Different Browsers?. For more information, please follow other related articles on the PHP Chinese website!