如何使用 Javascript 计算文本文件中的字数

Question

I am stock at something here.

I am trying to integrate a feature on my web application (HTML5) that will enable users choose a text file using normal HTML file input box, and have have the total number of words in the selected text file displayed to them in real-time.

Here is what i have so far on the Javascript part:

<script>
    //function to count words in selected text file
    $(function() {
        $('#upload').change( function(event) {
            var tmppath = URL.createObjectURL(event.target.files[0]); //get temp path of selected file

            //some codes here to read the file selected by the user and store the number of words in a string called total_word 
            $("#display_File_count").text(total_word); //display the number of words in the appropriate span
        });
    });
</script>

here is the HTML part;

<input name="upload" type="file" id="upload" accept="text/plain" accesskey="u">
                <div><span id="display_File_count">0</span> <span> words</span></div> 

When the user clicks on the file selector and choose a text file, the script should read the text file's contents count number of words contained in it (all done on client's side).

The number of words is then displayed within the span with id "display_file_count".

Please guys I need a way out.

Thanks in advance.

Answer 1

I would use the FileReader (remember to check browser compatibility - becuase it is not supported by all browsers)

$('#upload').change( function(event) {

    var f = event.target.files[0];
    if (f) {
        var r = new FileReader();

        r.onload = function(e) { 
            var contents = e.target.result;
            var res = contents.split(" "); 
            $("#display_File_count").text(res.length);
        }
        r.readAsText(f);
    }
});