查找是否在文件输入上单击了"取消"

Question

我尝试使用在不同位置描述的黑客使用:

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步:SelectFile - 一些选择一些文件(并注意输出)

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

Answer 1

一种解决方案是使用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);
  }
}

这可以正确响应所选文件名的变化,您可以在此处测试:http://jsfiddle.net/munderwood/6h2r7/1/

与您尝试执行此操作的方式唯一不同的是,如果您立即取消,或连续两次取消,或连续两次选择相同的文件,则事件将不会触发.但是,每次文件名实际更改时,您都会正确检测到它.

我不确定为什么你的原始尝试不起作用,虽然我最好的猜测是,onfocus事件是异步触发的时间问题,并且在input控件的属性完成更新之前.

更新:要确定用户每次关闭文件对话框时选择了什么,即使没有任何更改,也可以通过在再次接收焦点和检查文件输入值之间添加短暂延迟来限制计时问题.checkOnCancel以下版本不是在接收到焦点后立即调用,而是在以后的版本中将charge其称为十分之一秒.

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

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