开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js监听input取消上传

在JavaScript中，如果你想要监听一个<input type="file">元素的取消上传操作，可以通过监听change事件来实现。当用户选择文件后，change事件会被触发；如果用户取消了文件选择，change事件同样会被触发，但是此时input.files属性会是一个空数组。

以下是一个简单的示例代码，展示了如何监听取消上传的操作：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>监听取消上传</title>
</head>
<body>

<input type="file" id="fileInput">

<script>
document.getElementById('fileInput').addEventListener('change', function(event) {
  if (event.target.files.length === 0) {
    console.log('文件选择被取消');
    // 在这里处理取消上传的逻辑
  } else {
    console.log('文件已选择:', event.target.files[0]);
    // 在这里处理文件上传的逻辑
  }
});
</script>

</body>
</html>

在这个示例中，当用户点击文件输入框并选择文件时，会在控制台输出所选文件的信息；如果用户取消了选择，则会输出“文件选择被取消”。

基础概念

<input type="file">: HTML元素，允许用户从本地计算机选择一个或多个文件。
change事件: 当输入框的值发生变化时触发的事件，适用于文件选择框。

优势

简单直观：使用标准的HTML和JavaScript即可实现。
兼容性好：几乎所有现代浏览器都支持这种方式的文件选择和事件监听。

应用场景

文件上传前的验证和处理。
用户体验优化，比如提示用户文件选择的状态。

可能遇到的问题及解决方法

用户取消选择后仍然触发上传逻辑：确保在处理上传逻辑前检查event.target.files.length是否为0。
多次选择同一文件不触发change事件：可以通过重置input.value来解决这个问题。

document.getElementById('fileInput').addEventListener('change', function(event) {
  if (event.target.files.length === 0) {
    console.log('文件选择被取消');
  } else {
    console.log('文件已选择:', event.target.files[0]);
    // 处理完上传逻辑后，重置input的值
    event.target.value = '';
  }
});

通过这种方式，即使用户多次选择同一个文件，每次都会触发change事件。

以上就是关于如何监听JavaScript中<input type="file">元素取消上传操作的详细解释和示例代码。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

input 事件监听

1、change事件，在input失去焦点才会考虑触发，它的缺点是无法实时响应，与blur事件有着相似的功能，但与blur事件不同的是，change事件在输入框的值未改变时并不会触发，当输入框的值和上一次的值不同...2、input事件，需要实时检测input输入框的值的时候，就需要用到h5的新事件:input事件了，input事件可以实现对input输入框值的实时监控，只要input输入框值发生改变就会触发，但因为是...h5的新事件，应此需要考虑兼容性问题，ie9以下的浏览器并没有实现这个事件， 3、propertychange事件，这个事件是在input的属性值发生改变时触发，而输入框的值就是input的value属性...，应此可以用其来监听输入数据的改变。...propertychange事件实时触发，即每增加一个字符或者删除一个字符就会触发，通过js也会触发（任何属性改变），但是该事件为ie专有input是ie之外大多数浏览器支持的事件，在value改变时触发

4.6K2 0

原生JS获取input上传的图片返回的地址

HTML文件点击上传 input隐藏，UI效果用label展示 --> input type="file" name="upload_file" id="uploadFile" onchange=...-- 没有上传的时候不显示 ,上传以后添加src--> 上传后，读取上传的文件 // 点击上传图片 function uploadImg(){ let file = document.getElementById('uploadFile').files...: 58px; height: 58px; border: 1px solid #ccc; margin-left:42px; margin-top:10px; } input

22.3K1 0

Vue监听input输入框

input v-model="initial" v-on:input="change">input> export default

2.3K3 0

input = file 实现上传文件

使用input = file实现文件上传功能，如果点击提交按钮，提交表单并上传选中的文件：上传简历"> input id="file" onChange={this.handleFileChange} type="file" name="file" multiple="multiple...">input> handleFileChange = (e) => {...const input = e.target; const files = e.target.files; if(files && files[0]) {...fileInput.value) { fileTip.innerHTML = '请选择您要上传的简历'; } if(!

7.2K4 0

【js】Input事件

Input Event常用事件触发的先后顺序如下： 1 keydown 2 keypress 3 textInput 4 input 5 keyup keydown，keyup 1 全部浏览器支持 2...返回键盘上按键对应的ASCII码（IE8-，Opera） textInput 1 IE9+，Chrome，Safari支持，别的浏览器不支持 2 在文本插入文本框之前触发，便于检查拦截用户输入使用 3 在input...:text，input:password，input:search，textarea以及元素是contentEditable模式时支持触发此事件 4 event.data，返回用户输入的文本（如果按键是...s，那么返回s；如果按键是s+Shift，那么返回S） 5 IE9中事件名为textinput（全小写，其它浏览器中I需要大写） input 1 IE9+，Firefox，Chrome，Safari，...Opera支持 2 在内容变化时，实时触发 3 在input:text，input:password，input:search，textarea支持触发此事件，在内容变化时，实时触发（与onchange

10.3K3 0

axios 上传文件封装_使用axios上传文件，如何取消上传

//在data里声明一个source data(){ return{ source:null,//取消上传 } //上传文件 let that = this; let cancelToken =...that.modal.formVisible = false; if(that.Axios.isCancel(error)){//主要是这里 util.notification(‘success’, ‘成功’, ‘取消上传镜像操作成功...’); } }); } //点击取消事件，也就是上图的取消按钮 cancel(){ let that = this; if(that.source){//我先判断soucre是否存在，因为如果我打开弹框不作任何操作...，点击取消按钮没有这一层判断的话，that.source.cancel(‘取消上传’);会报错。...that.source.cancel(‘取消上传’);//”取消上传”这几个字，会在上面catch()的error中输出的，可以console看一下。

6.3K2 0

input获取焦点原生js_原生js的input事件

1.onfocus 当input 获取到焦点时触发 2.onblur 当input失去焦点时触发，注意：这个事件触发的前提是已经获取了焦点再失去焦点的时候才会触发该事件，用于判断标签为空。...3.onchange 当input失去焦点并且它的value值发生变化时触发，个人感觉可以用于注册时的确认密码。...type=button，input作为一个按钮使用时的鼠标点击事件 7.onselect 当input里的内容文本被选中后执行，只要选择了就会触发，不是全部选中 8.oninput 当input的...value值发生变化时就会触发，(与onchange的区别是不用等到失去焦点就可以触发了) 使用方法：以上事件可以直接放到input的属性里，例如： 1 ，可以通过js给input dom元素添加相应的事件...， 2 document.getElementByTagName(‘input’).onfocus = function(); 3 事件监听。

25.8K6 0

js监听模式模拟事件监听

function Handle(){ this.events={}; this.addEventListener=functio...

19.4K3 0

vue 监听input停止输入后发送请求

this.lastTime = setTimeout(()=>{ // AJAX(newVal) },2000) } } watch先监听一下...input的值我们第一次输入, watch的函数开始调用, this.lastTime初始值我设置为0, 故执行if内语句 if语句内新建一个setTimeout, 且其返回值(这个值是num, 自己

3.6K3 0

input上传文件个数控制

HTML: 1 请上传[2,5]个文件 2 3 input...onchange="fileCountCheck(this,2,5)" /> 4 JavaScript: 1 /** 2 * [fileCountCheck 上传文件数量检测

5.4K3 0

input框取消光标颜色手机端不生效

input{ color:transparent; } input value="我要隐藏光标"> //文字颜色可以使用text-shadow属性 input{ color:transparent; text-shadow:0 0 0 red; } PC端没问题，但是手机端测试无效。...u010730897/article/details/72721960 这里我用div模拟一个： div.box{ position: relative; } input.class3...; top:0; left:0; } input...还可与使用一个方法：给div或者p加 contenteditable="true" 属性然后获取他的值就好了但是原理跟input的基本一样

1.4K6 0

JS监听中文输入

在做第六个项目（根据输入框实时调用AJAX古诗匹配）时，当我们输入中文拼音，还在拼音字符状态未选择成中文时，一直在执行我编写的事件监听处理函数（当输入框里的值有变化时执行此函数，调用AJAX在页面显示数据里包含这些字的古诗...而我想要的是在我们输入拼音未完成中文选择时，不让其执行我们的监听处理函数，只有选择完中文后才去执行调用AJAX判断有没有包含输入的这些字的古诗。.../code.jquery.com/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"> $('#this_input').on('input propertychange', function () {//input propertychange...的输入改变了input框里的值时，js会监听到input propertychange事件，执行判断(一开始时$(this).prop('cnStart')的值我们没有定义，为undefined，在监听了

9.5K2 0

input标签内发生变化进行监听

onpropertychange事件的区别：　　onchange事件在内容改变（两次内容有可能相等）且失去焦点时触发；onpropertychange事件是实时触发，每增加或删除一个字符就会触发，通过js...oninput事件与onpropertychange事件的区别：　　oninput事件是IE之外的大多数浏览器支持的事件，在value改变时实时触发，但是通过js改变value时不会触发；onpropertychange...onpropertychange失效的情况： oninput事件：　　（1）当脚本中改变value时，不会触发；　　（2）从浏览器的自动下拉提示中选取时，不会触发； onpropertychange事件：　　当input

5662 0

vue中使用input file上传文件

刚刚学习前端的时候还是觉得这个东西好难的样子，后来第一家公司由于没有这个需求就没用过，现在这家公司由于要求很完美的组件，我就是用的vue组件vue-image-...

1.1K2 0

input file accept限制文件上传类型

一、需求上传文件只允许上传doc、docx、jpg、png、gif和pdf格式的文件，需要在前后端进行双重限制二、前端实现 1）前端限制通过input file accept属性实现...accept中以逗号分隔开【图一】，便可以实现选择文件时，默认只可选择设定格式的文件【图二】,需要说明的是，MIME格式image/jpeg对应.jpg，.jpeg等几种格式，不能达到只单独限制jpg格式的，js...png,image/gif,application/pdf"> 图二 2）【图二】中可以看到，默认只选择accept中自定义格式的文件，下拉中依旧可以选择所有文件，如果需要前端更严密的控制，可以通过 js...再次验证处理; 不使用上传附件插件，使用通用的input file方式添加js验证格式方法： $('input[type="file"]').live("change", function () {...row.append('' + filename + ''); row.append('js-del-row

6.1K5 0

微信小程序监听input输入并取值

小程序的事件分为两种，冒泡和非冒泡事件，像的submit事件，input/>的input事件，的scroll事件等非冒泡事件，需要到组件的文档里去找，如下是我截图的一些常用的非冒泡事件...想要实时监听input的输入只要使用bindinput就可以了， wxml： input bindinput='watchPassWord' type='password' class="weui-input..." placeholder="请输入密码" /> js： Page({ // 监听输入 watchPassWord: function (event) { console.log(event.detail.value

3.3K7 0

js监听滚轮事件

验证扩展 chrome（ie）与firefox对滚轮事件的监听方式是不一样的,并且返回的数值正负也是正好相反的代码 /*********************** * 函数：注册某元素的滚轮事件...调用方式例如页面上滚动值: input

9.4K1 0

JS实现键盘监听

本文链接：https://ligang.blog.csdn.net/article/details/44467477 项目中要监听键盘组合键CTRL+C，以便做出对应的响应。...> js.../jquery-1.8.0.min.js?...&& event.keyCode === 67){ alert('你按下了CTRL+C'); } }); }); /* * $('input...').keyup(function(){...}); * $('input').bind('keyup', function(){...}); * $('input').live('keyup

7.1K3 1

js 手动触发input事件

let evt = document.createEvent('HTMLEvents') evt.initEvent('input', true, true) $('#InputField').val

10.7K3 0

input只允许上传图片类型文件

accept=”image/*” 解决变慢的问题 input[file]标签的accept属性可用于指定上传文件的 MIME类型。...例如，想要实现默认上传图片文件的代码，代码可如下： input type=”file” name=”file” class=”element” accept=”image/*”> 效果如下图所示，默认过滤掉所有非图片文件...解决办法如下： input type=”file” accept=”image/gif,image/jpeg,image/jpg,image/png,image/svg”> accept=”image

8903 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭