set an onclick event watcher within an onchange event processing possible?

Question

I saw a post How do I read in a local text file with javascript?

I want to add a button to simulate an upload. So my consideration is set a watcher to onclick in onchange processing, is it possible?

Here is jsfiddle

js

function readMultipleFiles(evt) {
//Retrieve all the files from the FileList object
var files = evt.target.files;

if (files) {
    for (var i = 0, f; f = files[i]; i++) {
        alert(f);
        var r = new FileReader();
        r.onload = (function (f) {
            return function (e) {
                var contents = e.target.result;
                alert(contents);
            };
        })(f);
        r.readAsText(f);
      }
    } else {
      alert("Failed to load files");
    }
}
document.getElementById('fileinput').addEventListener('change', readMultipleFiles, false);

html

<input type="file" id="fileinput" multiple />

so what is the problem? - the fiddle seems to be reading the file — Arun P Johny, Mar 19 '14 at 02:40

score 0 · Accepted Answer · answered Mar 19 '14 at 03:12

Instead of the change handler, add a button and add a click handler

<input type="file" id="fileinput" multiple />
<button id="read">Read</button>

then

jQuery(function ($) {
    function readMultipleFiles(input) {
        //Retrieve all the files from the FileList object
        var files = input.files;

        if (files && files.length) {
            for (var i = 0, f; f = files[i]; i++) {
                var r = new FileReader();
                r.onload = (function (f) {
                    return function (e) {
                        var contents = e.target.result;
                        alert(contents);
                    };
                })(f);
                r.readAsText(f);
            }
        } else {
            alert("Failed to load files");
        }
    }

    var fileIn = $('#fileinput')[0];
    $('#read').click(function () {
        readMultipleFiles(fileIn)
    })
})

Demo: Fiddle

set an onclick event watcher within an onchange event processing possible?

1 Answers1