我有一个使用文件API的HTML5应用程序,使用元素。当用户选择文件时,我能够做出响应。但是如果用户点击文件选择对话框中的“取消”按钮而不是“确定”按钮,我希望能够执行某些操作。然而,我找不到任何在输入元素上触发的事件,以便在“取消”时做出响应。
是否有一些我忽略的在“取消”时触发的事件,或者我应该重新设计我的应用程序,使其不需要这个功能呢?
我有一个使用文件API的HTML5应用程序,使用元素。当用户选择文件时,我能够做出响应。但是如果用户点击文件选择对话框中的“取消”按钮而不是“确定”按钮,我希望能够执行某些操作。然而,我找不到任何在输入元素上触发的事件,以便在“取消”时做出响应。
是否有一些我忽略的在“取消”时触发的事件,或者我应该重新设计我的应用程序,使其不需要这个功能呢?
我有同样的问题,解决方案非常简单...至少在我的情况下是这样的。如果用户在文件选择对话框中点击[cancel]按钮,NW.js(Node-Webkit)会触发oncancel事件。如果您也在NW.js上(process.version为v5.11.0),可以使用这种简单和本地的方法。
我还尝试了Windows 10上的Microsoft HTA,它不会触发oncancel事件。
是的,我们在捕获取消按钮方面存在问题。没有事件。 生活技巧解决方案是使用其他事件: 文件输入上的“focus”事件或窗口上的“mousemove”事件。 输入文件字段必须对“focus”事件可见。 使用鼠标事件时,需要延迟捕获事件。
type="file"
的输入元素的取消事件,您可以监听元素上的 change 事件,并检查用户是否选择了任何文件或取消了对话框。
请按照以下 JavaScript 代码片段操作:<input type="file" id="myFileInput">
<script>
const fileInput = document.getElementById('myFileInput');
fileInput.addEventListener('change', event => {
const files = event.target.files;
if (files.length > 0) {
// The user selected some files
console.log('Files selected:', files);
} else {
// The user canceled the dialog box
console.log('Dialog box canceled');
}
});
</script>
id="myFileInput"
的输入元素。然后,我为元素上的更改事件添加了一个事件侦听器。在事件侦听器内部,我检查event.target
对象的文件属性,以查看用户是否选择了任何文件。如果文件数组的长度大于0,则我们知道用户已选择了一些文件,并将它们记录到控制台中。如果文件数组的长度为0,则表示用户已取消对话框,并记录一条消息到控制台,指示对话框已被取消。In react , on Change event of input field , the event has no files on cancel event, we can proceed with this assumption. Cancel event will be captured. on file selection it wont be undefined.
handleChange = (event) => {
console.log(event);
console.log(event.target.files[0]);
this.setState({
tableDataResult: false,
});
if(event.target.files[0]){
this.setState({
csvfile: event.target.files[0],
});
}else{
//Cancel event called
console.log("false");
this.setState({
csvfile: oldValue,
});
}
};
<input
style={{
width: "450px",
marginLeft: "15px",
marginTop: "5px",
}}
className="csv-input"
type="file"
ref={(input) => {
this.filesInput = input;
}}
name="file"
placeholder={null}
onChange={this.handleChange}
/>
并没有真正的监听器来检测文件是否被选中,但你可以通过使用on change事件在代码中设置一个注释来绕过此问题:
var FileChoosen = false;
var inputElement = document.getElementById("inputField");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
var fileList = this.files; /* now you can work with the file list */
//Check if the layout was changed from file API:
if(document.getElementById('fileOutput').innerHTML != "") {
FileChoosen = true;
setTimeout("funcCalledToCheckUserSelection()", 500);
};
}
当用户点击取消时,更改事件再次触发。这对我很有效;
$('#attachedFiles').bind("change", function () {
var file = this.files[0];
if (file) {
// if file selected, do something
} else {
// if user clicks 'Cancel', do something
}
});
浏览...
- 这是关于浏览器政策的问题,其他浏览器只能取消点击。文件名在文件输入类型中的显示因浏览器而异。在Google Chrome上,取消操作会删除文件并清除文件输入类型中的文件名,而其他浏览器则不会。就是这样。 - maliness