Question

在我的HTML页面中，我有以下ul：

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

在我的JavaScript页面中，我有这个功能

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);

 }
}

我想调用ul中的函数。怎么会发生这种情况？这是我到目前为止所尝试的

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

但是给了我一个错误。在ul？

中调用该函数的正确编码是什么？

Answer 1

我在您的代码中看到的问题：

el是一个DOM对象，而不是jQuery object。如果您执行el instanceof $，则会获得false。
change元素不会触发ul事件。
HTMLUListElement上没有files属性，如果这是el所代表的内容。

HTML

<input type=file id=inFile2>

的JavaScript

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

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

使用文件输入（即<input type=file>），有files属性返回FileList。有关详细信息，请参阅HTMLInputElement。

例如，请参阅jsFiddle。

Answer 2

这是你在找什么？

小提琴： fiddle

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

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

}

Answer 3

我看不出使用jQuery的任何原因..我使用的是纯JavaScript：

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

jQuery只是另一个减慢脚本执行速度的JS库 - 不多，但确实......

请参阅Javascript Event Listening

使用javascript调用函数

3 个答案:

HTML

的JavaScript