在Web浏览器中,当用户点击文件字段以上传文件时,浏览器会显示一个文件上传对话框(至少在Windows和OSX中是这样)。
假设用户改变了主意并取消了文件上传。我们能找出来吗?
如果用户按下了Esc键(通常关闭文件对话框),我们可以找到。但是如果用户点击“取消”或切换到“取消”并按Enter呢?
假设用户改变了主意并取消了文件上传。我们能找出来吗?
如果用户按下了Esc键(通常关闭文件对话框),我们可以找到。但是如果用户点击“取消”或切换到“取消”并按Enter呢?
<input type="file" />
不会自动上传文件,除非您使用ajax或用户提交表单。用户只是告诉浏览器在某个时刻提交表单时可以在哪里找到文件。HTML:
<input type="file" id="example" />
Javascript(使用jQuery):
$(document).ready( function() {
$('#example').parent().on( 'keydown', function(e) {
var key = e.key || e.keyCode || e.which;
if( key == "Tab" || key == 9) {
$('#example').data( 'actiontime', +new Date() );
}
} );
$('#example').on( 'blur', function() {
$(this).data( 'lastval', $(this).val() );
} ).on('mousedown', function() {
$(this).data( 'actiontime', +new Date() );
} ).on('focus', function() {
var fastevents = new Date() - $(this).data( 'actiontime' ) < 100;
if( $(this).data( 'lastval' ) == undefined ) {
console.log( 'First run' );
} else if( $(this).data( 'lastval' ) != $(this).val() && !fastevents ) {
console.log( 'Input changed' );
} else if( !fastevents ) {
console.log( 'User canceled dialog somehow' );
} else {
console.log( 'Other event' );
}
});
});
是的,首先让上传按钮触发一个函数。
然后发送一个关于它的服务器Ajax请求。
在服务器端记录日志。
然后,如果在收到另一个请求或超时之前没有上传文件,则表示用户取消了上传。
持续运行一个 循环 直到用户在 body 上点击任意位置。
在循环中,检查输入文件是否已更改。
或者您可以尝试 如何检测在文件输入上单击取消时的操作
blur()
事件。我希望它始终运行,除非模糊发生是因为文件选择框被打开。我认为这是不可能的,所以下一个最好的方法是检测是否已取消并适当地处理事件。 - Jumbalaya Wanton