输入类型为“ file”的jQuery更改方法

72

我试图用简单优雅的API来拥抱jQuery 100％，但是我遇到了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所忽略，对吗？

其他人是否遇到过相同的问题，除了上述内容以外，您是否有其他解决方法或解决方案？

— 古龙8
source

我通常避免像瘟疫一样的IE浏览器。大声笑，但认真的说，我在Firebox中进行开发，以便可以利用Firebug及其强大功能，然后在IE，Chrome和Safari中进行测试。你为什么要问？.live（）方法（下面的答案）为我解决了这个问题。

— gurun8

@ gurun8为什么您的uploadFile（）没有任何参数？我想像这样调用ASP.NET MVC方法，但是javascript应该将要上传的文件作为参数发送

— 代码

92

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

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

更新：

从jQuery 1.7+开始，您现在应该使用.on（）

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

— 路易斯·梅尔拉加蒂
source

1

jQuery中的绑定更改事件在IE <9中不起作用，而是使用本机onchange。

— 桑耶夫2014年

72

从jQuery 1.7开始，不推荐使用.live（）方法。使用.on（）附加事件处理程序。较旧版本的jQuery的用户应优先使用.delegate（）而不是.live（）。请参阅：http：//api.jquery.com/on/

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

— 马西奥·俊
source

1

反对live（）的用法很不错，但是显示的形式不起作用。@LuisMelgrati所示的形式起作用。实际上，您链接到的页面提供了第二种形式来代替此功能。

— PhiLho 2015年

感谢@PhiLho，才发现我指的链接是.live（）而不是.on（）

— macio.Jun

11

我无法通过将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);
}

— 罗德尼·希斯
source