javascript - 查找是否在文件输入上单击了 'cancel'

Question

我尝试使用在不同位置描述的 hack，它使用:

document.body.onfocus = checkOnCancel();

一个例子:

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;
}

这里有什么问题吗？因为 fileSelectedEle.value 总是返回前一个执行值而不是用户选择的值。这是输入文件的预期行为吗？如何解决此问题以读取所选的实际文件？

http://jsfiddle.net/smV9c/2/

您可以通过以下方式重现错误:

第 1 步:选择文件 - 选择一些文件(并注意输出)

第 2 步:选择文件 - 按取消(并注意输出)

Answer 1

一种解决方案是使用 input 的 onchange 事件。

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);
  }
}

这会正确响应所选文件名的更改，您可以在此处进行测试:http://jsfiddle.net/munderwood/6h2r7/1/

行为与您尝试执行的方式的唯一潜在差异是，如果您立即取消，或连续两次取消，或连续两次选择同一文件，则事件不会触发.但是，每次文件名实际更改时，您都会正确检测到它。

我不确定为什么您最初的尝试没有成功，尽管我最好的猜测是这是 onfocus 事件在 input 之前异步触发的时间问题 控件的属性已完成更新。

更新:要确定用户每次关闭文件对话框时选择了什么，即使没有任何变化，也可以通过在再次接收焦点之间添加一个短暂的延迟来避免计时问题，并且检查文件输入的值。以下版本的 charge 不是在收到焦点后立即调用 checkOnCancel，而是在十分之一秒后调用它。

function charge() {
  document.body.onfocus = function () { setTimeout(checkOnCancel, 100); };
}

这是一个工作版本:http://jsfiddle.net/munderwood/6h2r7/2/ .