我尝试使用在不同位置描述的黑客，它使用：
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您可以通过以下方式重现错误：
第 1 步：选择文件 - 一些选择一些文件（并注意输出）
第 2 步：选择文件 - 按取消（并注意输出）
一种解决方案是使用
onchangeinputvar 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/
行为与您尝试执行此操作的方式的唯一潜在差异是，如果您立即取消，或连续两次取消，或连续两次选择同一文件，则该事件将不会触发。但是，每次文件名实际更改时，您都会正确检测到它。
我不确定为什么您最初的尝试不起作用，尽管我最好的猜测是这是
onfocusinput更新：要确定用户每次关闭文件对话框时选择的内容，即使没有任何更改，也可以通过在再次接收焦点和检查文件输入的值之间添加短暂的延迟来避免计时问题。以下版本的
checkOnCancelchargefunction charge() {
document.body.onfocus = function () { setTimeout(checkOnCancel, 100); };
}
这是一个工作版本：http://jsfiddle.net/munderwood/6h2r7/2/。
您可以挂钩
window.focus//此代码适用于 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);
}
处理用户取消文件输入的所有各种方式是很棘手的。
window.focuswindow.touchend在实现方面，您可以使用
addEventListenerwindow.addEventListener('focus', () => console.log('no file selected'), { once: true });
这是一个示例，说明如何使用它以编程方式获取图像，处理上面列出的注意事项（打字稿）：
/**
* opens the user OS's native file picker, returning the selected images. gracefully handles cancellation
*/
export const getImageFilesFromUser = async ({ multiple = true }: { multiple?: boolean } = {}) =>
new Promise<File[]>((resolve) => {
// define the input element that we'll use to trigger the input ui
const fileInput = document.createElement('input');
fileInput.setAttribute('style', 'visibility: hidden'); // make the input invisible
let inputIsAttached = false;
const addInputToDom = () => {
document.body.appendChild(fileInput); // required for IOS to actually fire the onchange event; https://stackoverflow.com/questions/47664777/javascript-file-input-onchange-not-working-ios-safari-only
inputIsAttached = true;
};
const removeInputFromDom = () => {
if (inputIsAttached) document.body.removeChild(fileInput);
inputIsAttached = false;
};
// define what type of files we want the user to pick
fileInput.type = 'file';
fileInput.multiple = multiple;
fileInput.accept = 'image/*';
// add our event listeners to handle selection and canceling
const onCancelListener = async () => {
await sleep(50); // wait a beat, so that if onchange is firing simultaneously, it takes precedent
resolve([]);
removeInputFromDom();
};
fileInput.onchange = (event: any) => {
window.removeEventListener('focus', onCancelListener); // remove the event listener since we dont need it anymore, to cleanup resources
window.removeEventListener('touchend', onCancelListener); // remove the event listener since we dont need it anymore, to cleanup resources
resolve([...(event.target!.files as FileList)]); // and resolve the files that the user picked
removeInputFromDom();
};
window.addEventListener('focus', onCancelListener, { once: true }); // detect when the window is refocused without file being selected first, which is a sign that user canceled (e.g., user left window into the file system's file picker)
window.addEventListener('touchend', onCancelListener, { once: true }); // detect when the window is touched without a file being selected, which is a sign that user canceled (e.g., user did not leave window - but instead canceled the modal that lets you choose where to get photo from on ios)
// and trigger the file selection ui
addInputToDom();
fileInput.click();
});
这里有什么问题吗？因为 fileSelectedEle.value 始终返回上一个执行值，而不是用户选择的值。这是输入文件的预期行为吗？如何解决此问题以读取所选的实际文件？
没有什么问题，这是预期的行为。如果用户取消文件选择过程，就好像他们从未启动过该过程一样。所以之前的值保留在原处。
有一个文件输入取消事件可以使用。
HTML
<label for="file">Select or file. Or don't.</label>
<input type="file" id="file" name="file" />
<div id="result"></div>
Javascript
const elem = document.getElementById("file");
const result = document.getElementById("result");
elem.addEventListener("cancel", () => {
result.textContent = "Canceled.";
});`
更多详细信息请参见文档