输入类型="文件"的jQuery更改方法

gur*_*un8 66 jquery file-upload input onchange event-handling

我试图用它简单而优雅的API来接受jQuery 100%,但我遇到了API和直接HTML之间的不一致,我无法弄清楚.

我有一个AJAX文件上传器脚本(它正常运行),我希望每次文件输入值更改时运行.这是我的工作代码:

<input type="file" size="45" name="imageFile" id="imageFile" onchange="uploadFile()">
Run Code Online (Sandbox Code Playgroud)

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

$('#imageFile').change(function(){ uploadFile(); });
Run Code Online (Sandbox Code Playgroud)

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

有没有其他人遇到过同样的问题,你有解决方法或解决方案,除了我上面描述的问题?

Lui*_*tti 87

刷新输入元素的ajax上传器是什么?如果是这样,你应该考虑使用.live()方法.

 $('#imageFile').live('change', function(){ uploadFile(); });
Run Code Online (Sandbox Code Playgroud)

更新:

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

 $(parent_element_selector_here or document ).on('change','#imageFile' , function(){ uploadFile(); });
Run Code Online (Sandbox Code Playgroud)


mac*_*Jun 63

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

$('#imageFile').on("change", function(){ uploadFile(); });
Run Code Online (Sandbox Code Playgroud)


小智 11

我无法通过向文件输入类型添加jQuery事件处理程序来使IE8 +工作.我不得不去老派并将onchange=""属性添加到输入标记:

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

function getFileName(elm) {
   var fn = $(elm).val();
   ....
}
Run Code Online (Sandbox Code Playgroud)

编辑:

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