从“选择文件”窗口中选择文件并将其关闭后，如何调用 JavaScript 函数？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2805977/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I call a JavaScript function after selecting a file from the Select File window and closing it?
提问by coderex
I have a file input element
我有一个文件输入元素
<input type="file" id="fileid">
How do I call a JavaScript function after selecting a file from the dialog window and closing it?
从对话框窗口中选择文件并关闭它后，如何调用 JavaScript 函数？
回答by mike clagg
jQuery("input#fileid").change(function () {
alert(jQuery(this).val())
});
回答by mike clagg
<input type="file" id="fileid" >
the change will function when you put script below the input
当您将脚本放在输入下方时，更改将起作用
<script type="text/javascript">
$(document).ready(function(){
$("#fileid").on('change',function(){
//do whatever you want
});
});
</script>
回答by Eng Cy
<script>
function example(){
alert('success');
}
</script>
<input type="file" id="field" onchange="example()" >
回答by mehdi
This tested code helps you:
此经过测试的代码可帮助您：
$("body").on('change', 'input#fileid',function(){
alert($(this).val());});
回答by Adi Prasetyo
I think your purpose is achievable, but AFAIK no such event like that.
我认为你的目的是可以实现的，但 AFAIK 没有这样的事件。
But to achieve that you need cooperate with 3 event, i assume you just need to know about the file name. I created walk around here
但是要实现您需要与 3 个事件合作，我假设您只需要知道文件名。我在这里创建了走动
- Firstly the change event just fired when actual changehappen, selecting same file won't trigger change event so do opening dialog and cancel it.
- Then clicking choose file the input element will gain focus, when pop up file dialog opened input element losing the focus.
- When pop up file dialog closed, input element will regaining it focus.
- So you might run client side validation on client side when the input element losing it focus 'again'.
- 首先，更改事件在实际更改发生时才触发，选择相同的文件不会触发更改事件，因此打开对话框并取消它。
- 然后点击选择文件输入元素将获得焦点，当弹出文件对话框打开输入元素失去焦点。
- 当弹出文件对话框关闭时，输入元素将重新获得焦点。
- 因此，当输入元素“再次”失去焦点时，您可能会在客户端运行客户端验证。
回答by marimaf
Try declaring on the top of your file:
尝试在文件顶部声明：
<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>
then:
然后：
<script language="javascript">
$jQ(document).ready(function (){
jQuery("input#fileid").change(function () {
alert(jQuery(this).val());
});
});
(you can put both in the same <script>tag, but you could just declare the first part in you parent layout for example, and use $jQ whenever you use jQuery in you child layouts, very useful when working with RoR for example)
（您可以将两者放在同一个<script>标签中，但例如，您可以只在父布局中声明第一部分，并在子布局中使用 jQuery 时使用 $jQ，例如在使用 RoR 时非常有用）
as mentioned in the comments in another answer, this will fire only AFTER you select a file and click open. If you just click "Choose file" and don't select anything it won't work
如另一个答案的评论中所述，只有在您选择文件并单击打开后才会触发。如果您只是单击“选择文件”并且不选择任何内容，它将不起作用
