从“选择文件”窗口中选择一个文件并关闭它后，如何调用JavaScript函数？

Question

我有一个文件输入元素

<input type="file" id="fileid"> 

如何调用从对话框窗口中选择一个文件，并关闭它后的JavaScript函数？

Answer 1

jQuery("input#fileid").change(function() { 
    alert(jQuery(this).val()) 
}); 

Answer 2

尝试宣告你的文件的顶部：

<script type="text/javascript"> 
    // this allows jquery to be called along with scriptaculous and YUI without any conflicts 
    // the only difference is all jquery functions should be called with $jQ instead of $ 
    // e.g. $jQ('#div_id').stuff instead of $('#div_id').stuff 
    $jQ = jQuery.noConflict(); 
</script> 

则：

<script language="javascript"> 
$jQ(document).ready(function(){ 
    jQuery("input#fileid").change(function() { 
     alert(jQuery(this).val()); 
    }); 
}); 

（你可以把两者在同一<script>标签，但你可以例如，只需在你的父布局中声明第一部分，并在你的子布局中使用jQuery时使用$ jQ，非常我们当与RoR工作时，例如）

正如在另一个答案中的评论中提到的，这将仅在选择文件并单击打开后触发。如果您只需点击“选择文件”，并没有任何选择，它不会工作

Answer 3

<input type="file" id="fileid" > 

当你把脚本输入

<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#fileid").on('change',function(){ 
     //do whatever you want 
    }); 
}); 
</script> 

Answer 4

<script> 
     function example(){ 
       alert('success'); 
     } 
</script> 


<input type="file" id="field" onchange="example()" > 

Answer 5

我觉得下面的变化将发挥你的目的是可以实现的，但是AFAIK没有这样的事件。

但是为了达到那个你需要配合3个事件， 我假设你只需要知道文件名。 我创建转转here

1. 首先刚发射时实际变化发生，选择相同的文件不会触发更改事件这么做打开对话框，并取消它的变化事件。
2. 然后点击选择文件，输入元素将获得焦点，当弹出文件对话框时打开输入元素失去焦点。
3. 当弹出文件对话框关闭时，输入元素将重新获得焦点。
4. 因此，当输入元素丢失时，您可能会在客户端运行客户端验证。