javascript 查找是否在文件输入上单击了“取消”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22898854/
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
Find if 'cancel' was clicked on file input
提问by SamSharma
I tried using a hack described in various locations which uses:
我尝试使用在不同位置描述的 hack 使用：
document.body.onfocus = checkOnCancel();
An example:
一个例子：
var fileSelectEle = document.getElementById('fileinput');
fileSelectEle.onclick = charge;
function charge()
{
document.body.onfocus = checkOnCancel;
}
function checkOnCancel()
{
alert("FileName:" + fileSelectEle.value + "; Length: " + fileSelectEle.value.length);
if(fileSelectEle.value.length == 0) alert('You clicked cancel!')
else alert('You selected a file!');
document.body.onfocus = null;
}
Is there something wrong here? Because fileSelectedEle.valuealways returns the previous execution value and NOT the one selected by the user.
Is this the expected behavior of input file? How to resolve this to read the actual file selected?
这里有什么问题吗？因为fileSelectedEle.value总是返回上一个执行值而不是用户选择的值。这是输入文件的预期行为吗？如何解决此问题以读取所选的实际文件？
You can reproduce the error by:
您可以通过以下方式重现错误：
Step 1: SelectFile - some select some file (and notice the output)
第 1 步：SelectFile - 一些选择一些文件（并注意输出）
Step 2: SelectFile - press cancel (and notice the output)
第 2 步：选择文件 - 按取消（并注意输出）
回答by Michael
One solution is to use the onchangeevent of the input.
一个解决方案是使用onchange的事件input。
var fileSelectEle = document.getElementById('fileinput');
fileSelectEle.onchange = function ()
{
if(fileSelectEle.value.length == 0) {
alert('You clicked cancel - ' + "FileName:" + fileSelectEle.value + "; Length: " + fileSelectEle.value.length);
} else {
alert('You selected a file - ' + "FileName:" + fileSelectEle.value + "; Length: " + fileSelectEle.value.length);
}
}
This responds correctly to changes in the selected filename, as you can test here: http://jsfiddle.net/munderwood/6h2r7/1/
这可以正确响应所选文件名的更改，您可以在此处进行测试：http: //jsfiddle.net/munderwood/6h2r7/1/
The only potential difference in behaviour from the way you were trying to do it, is that if you cancel right away, or twice in a row, or select the same file twice in a row, then the event won't fire. However, every time the filename actually changes, you'll detect it correctly.
行为与您尝试执行的方式的唯一潜在差异是，如果您立即取消或连续两次取消，或连续两次选择同一文件，则不会触发该事件。但是，每次文件名实际更改时，您都会正确检测到它。
I don't know for sure why your original attempt didn't work, although my best guess is that it's a timing issue with the onfocusevent firing asynchronously, and before the inputcontrol's properties have finished updating.
我不确定为什么您最初的尝试不起作用，尽管我最好的猜测是onfocus事件异步触发的时间问题，并且在input控件的属性完成更新之前。
UPDATE:To determine what the user has selected every time they close the file dialog, even if nothing has changed, the timing issue can be skirted by adding a brief delay between receiving focus again, and checking the value of the file input. Instead of calling checkOnCancelimmediately upon receiving focus, the following version of chargecauses it to be called a tenth of a second later.
更新：为了确定用户每次关闭文件对话框时选择了什么，即使没有任何变化，也可以通过在再次接收焦点和检查文件输入值之间添加一个短暂的延迟来避免计时问题。checkOnCancel下面的版本不是在收到焦点时立即调用，而是在charge十分之一秒后调用它。
function charge() {
document.body.onfocus = function () { setTimeout(checkOnCancel, 100); };
}
Here's a working version: http://jsfiddle.net/munderwood/6h2r7/2/.
这是一个工作版本：http: //jsfiddle.net/munderwood/6h2r7/2/。
回答by Abhi Beckert
Is there something wrong here? Because fileSelectedEle.value always returns the previous execution value and NOT the one selected by the user. Is this the expected behavior of input file? How to resolve this to read the actual file selected?
这里有什么问题吗？因为 fileSelectedEle.value 总是返回前一个执行值而不是用户选择的值。这是输入文件的预期行为吗？如何解决此问题以读取所选的实际文件？
There's nothing wrong, this is expected behaviour. If the user cancels the file selection process, then it's as if they never started it. So the previous value is left in place.
没有错，这是预期的行为。如果用户取消了文件选择过程，那么就好像他们从未启动过一样。所以之前的值保留在原位。
回答by Simon Sawyer
You can hook into the window.focusevent which gets fired when they cancel window's file select box. Then check to see if it actually has a file selected.
您可以挂钩window.focus取消窗口的文件选择框时触发的事件。然后检查它是否确实选择了一个文件。
回答by ANiket Chavan
//This code works in chrome for file selection try it
//这段代码在chrome中适用于文件选择试试吧
<--write this line in HTML code-->
<input type='file' id='theFile' onclick="initialize()" />
var theFile = document.getElementById('theFile');
function initialize() {
document.body.onfocus = checkIt;
console.log('initializing');
}
function checkIt() {
setTimeout(function() {
theFile = document.getElementById('theFile');
if (theFile.value.length) {
alert('Files Loaded');
} else {
alert('Cancel clicked');
}
document.body.onfocus = null;
console.log('checked');
}, 500);
}
