-1

In my HTML page I've the following ul:

 <ul id="inFile2"></ul>

and in my JavaScript page, I've this function

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

 console.log(files);
 // files is a FileList of File objects. display first file name
 file = files[0];

 console.log(file);
 if (file) {

     readInputFile(file);
     console.log(file);

 }
}

I want to call the function in the ul. How could that happen? this is what I have tried so far

el=document.getElementById('inFile2');
el.on("change",handleFileSelect);

but gives me an error. What is the correct coding to call that function in the ul?

Improve this question
8
  • What's the error message? Commented Jul 16, 2014 at 8:23
  • 1
    "I want to call the function in the ul". Hmmm what do you mean? In response to which event? Click? BTW what's "el"? Where it comes from? Commented Jul 16, 2014 at 8:24
  • The change event does not fire on ul elements… if that's what el is. Commented Jul 16, 2014 at 8:24
  • 2
    A <ul> element cannot have a FileList object, and it also does not have a 'change' event Commented Jul 16, 2014 at 8:25
  • 1
    1. el is DOM object not a jQuery object. 2. Read @Andy comment once again Commented Jul 16, 2014 at 8:27

3 Answers 3

Reset to default
1

Issues that I see with your code:

  1. el is a DOM object, not a jQuery object. If you do el instanceof $, you will get false.
  2. A change event does not fire on ul elements.
  3. There is no files property on an HTMLUListElement, if that's what el is representing.

HTML

<input type=file id=inFile2>

JavaScript

var $el = $('#inFile2');
$el.on('change', handleFileSelect);

// Alternatively
var el = document.getElementById('inFile2');
$(el).on('change', handleFileSelect);

With a file input (i.e. <input type=file>), there is a files property that returns a FileList. See HTMLInputElement for more details.

See jsFiddle for example.

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

4 Comments

The code I provided should call the function upon changing the file in the input assuming that the function is defined before the .on() statement.
i know about input type="file" but this will make the user browse the file, my program requirements allows the project to read the file from a folder and place it in the ul that's why i cant use the type="file"
If you're running this program in a browser, you cannot automatically read files from the user's filesystem because this would be a major security flaw.
the error is not showing anymore when trying your code but it is not firing
0

Is this what you are looking for?

Fiddle: fiddle

$("#inFile2").click(function(){
   handleFileSelect('your_value')
});

function handleFileSelect(event) {
alert("called");
//your code here

}
Improve this answer

Comments

0

I can't see any reason of using jQuery .. I'd use pure JavaScript:

var el = document.getElementById("inFile2");
el.addEventListener("change", handleFileSelect, false);

jQuery is just another JS library which slows down script execution - not much, but does...

see Javascript Event Listening

Improve this answer

1 Comment

thanks for your help but as I said earlier I dont want to choose file, I want the file to be shown in the inFile2 directly reading from folder not by choosing

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.