Question

我有一个文件输入元素

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

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

Answer 1


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

Answer 2

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

当您将脚本放在输入

下方时，更改将起作用

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

Answer 3

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


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

Answer 4

尝试在文件顶部声明：

<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 5

我认为你的目的是可以实现的，但AFAIK没有这样的事件。

但要实现这一点，你需要配合3个事件，我假设你只需要知道文件名。我创建了here

首先，当实际更改发生时触发更改事件，选择同一文件不会触发更改事件，因此请打开对话框并取消它。
然后单击选择文件，输入元素将获得焦点，当弹出文件对话框打开输入元素失去焦点时。
当弹出文件对话框关闭时，输入元素将重新获得焦点。
因此，当输入元素失去焦点时，您可能会在客户端运行客户端验证＆＃39;。

Answer 6

此经过测试的代码可帮助您：

$("body").on('change', 'input#fileid',function(){
    alert($(this).val());});

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

6 个答案: