jquery - 输入类型=“文件”的jQuery更改方法

Question

我正在尝试使用 jQuery 100% 来使用它简单而优雅的 API，但我遇到了 API 和我无法弄清楚的直接 HTML 之间的不一致。

我有一个 AJAX 文件上传器脚本（可以正常运行），每次文件输入值更改时我都想运行它。这是我的工作代码：

<input type="file" size="45" name="imageFile" id="imageFile" onchange="uploadFile()">

当我将onchange事件转换为 jQuery 实现时：

$('#imageFile').change(function(){ uploadFile(); });

结果不一样。使用该onchange属性，只要uploadFile()值按预期更改，就会调用该函数。但是使用 jQuery API.change()事件处理程序，该事件仅在第一次更改值时触发。之后的任何值更改都将被忽略。这对我来说似乎是错误的，但这肯定不是 jQuery 的疏忽，对吧？

有没有其他人遇到过同样的问题，除了我上面描述的问题之外，您还有解决方法或解决方案吗？

score 93 · Accepted Answer

ajax 上传器是否刷新了您的输入元素？如果是这样，您应该考虑使用 .live() 方法。

 $('#imageFile').live('change', function(){ uploadFile(); });

更新：

从 jQuery 1.7+ 你现在应该使用 .on()

 $(parent_element_selector_here or document ).on('change','#imageFile' , function(){ uploadFile(); });

score 76 · Accepted Answer

从 jQuery 1.7 开始，不推荐使用 .live() 方法。使用 .on() 附加事件处理程序。旧版本 jQuery 的用户应该使用 .delegate() 而不是 .live()。参考：http ://api.jquery.com/on/

$('#imageFile').on("change", function(){ uploadFile(); });

score 11 · Accepted Answer

通过向文件输入类型添加 jQuery 事件处理程序，我无法让 IE8+ 工作。我不得不去老派并将onchange=""属性添加到输入标签：

<input type='file' onchange='getFilename(this)'/>

function getFileName(elm) {
   var fn = $(elm).val();
   ....
}

编辑：

function getFileName(elm) {
   var fn = $(elm).val();
   var filename = fn.match(/[^\\/]*$/)[0]; // remove C:\fakename
   alert(filename);
}

3 回答 3