使用 JavaScript 捕获文件浏览窗口的关闭答案

【问题标题】：Capturing the close of the browse for file window with JavaScript使用 JavaScript 捕获文件浏览窗口的关闭
【发布时间】：2012-08-22 21:12:27
【问题描述】：

我正在使用 infile 来要求用户浏览他们机器上的文件。如果在没有选择文件的情况下关闭了窗口，是否有办法捕捉到？
例如，如果单击 x。

<input type="file" name="data" id="inFile" size="15" style="display:none" onchange="handleFiles(this)"/>

谢谢

【问题讨论】：

请说明您是指打开文件对话框还是整个浏览器窗口。

标签： javascript filedialog

【解决方案1】：

有了HTML input file selection event not firing upon selecting the same file的解决方案，我想你可以用这个：

<input type="file" name="data" id="inFile" />

var fileElem = document.getElementById("inFile");
var fileSelected = null;
fileElem.onclick = function(e) {
    fileSelected = this.value;
    this.value = null;
});
/* or use this in your browse() function:
    fileElem.value = null;
*/
fileElem.onchange = function(e) { // will trigger each time
    handleFileDialog(this.value === fileSelected);
};

function handleFileDialog(changed) {
    // boolean parameter if the value has changed (new select) or not (canceled)
}

【讨论】：

【解决方案2】：

我所做的是：用户打开窗口后启动计时器，在该定时功能中，我每 0.5 秒检查一次是否已使用布尔变量选择了文件。一旦用户选择文件或发生 HTML5 DnD，我就会停止计时器。我希望这对某人有所帮助。

<div id="uploader"><input type="file" name="data" id="inFile" size="15" style="display:none" onchange="handleFiles(this)"/></div>

<button dojoType="dijit.form.Button" id="fileSelect" type="button" onmouseup="browse();">Browse</button> 

var fileselected = false;
function handleFiles(input){
    fileselected = true;
//use input
}

var interval;
function browse(){
    fileselected = false;
    var fileElem = document.getElementById("inFile");
    fileElem.click();
    interval = setInterval(setdiv, 500);

}
function setdiv(){
    if(!fileselected){  
        //do staff until user decides to Dnd or  browse for file again
        clearInterval(interval);
    }   
}

【讨论】：

如何在取消时捕获关闭对话框的事件？如果用户单击“取消”，您的计时器将永远运行:-(

【解决方案3】：

我认为blur 事件会做到这一点：

<input
  type="file"
  onchange="changed=true; handleFiles(this)"
  onblur="if(!changed) alert('nothing selected'); changed=false;"
/>

【讨论】：

嗯，我担心这是中止选择时发生的第一个事件 - 我没有其他办法。
我来到这里，因为我只想在隐藏文件输入下突出显示 div，所以在我的情况下，使用 onfocus 和 onblur 是正确的解决方案。