监听input type=file 文件上传取消事件

在做项目的时候，需要根据是否上传图片，（前提是已经上传文件，再次上传取消时，监听取消事件）进而判断页面变化。通过查阅相关资料，发现chane事件并不能监听取消，于是从另外一种角度：判断上传的文件是否有值，进而监听取消事件。

<input type="file" id="batchUpload"name="files" accept="image/jpg, image/gif,image/png, image/jpeg" multiple="multiple">

 var batchUpload = document.querySelector('#batchUpload');batchUpload.click();batchUpload.addEventListener('change', function () {            var filesList = document.querySelector('#batchUpload').files;if(filesList.length==0){         //如果取消上传，则改文件的长度为0         return;}else{  //如果有文件上传，这在这里面进行}});

通过上述代码可以发现，当我们上传文件时，如果取消上传，document.querySelector('#batchUpload').files.length==0，反之如果有文件上传，则其上传的文件长度会大于0，所以我们可以借此对取消事件进行监听

监听input type=file 文件上传取消事件相关推荐

html input type=file 文件上传; 图片上传; 图片闪烁
(1)input file 对话框和获取选中文件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
Android webview Input type=file 文件上传解决方法
默认的情况下在HTML中写 <input type=file /> 的时候回弹出选择文件的窗口,但实际上在webview中默认的是不弹出窗口的解决方法在WebChromeClient ...
jq监听input type=file发生改变，即选择文件,并获取文件名称
jq监听input type="file"发生改变,即选择文件,并获取文件名称 <input id="fileupload" name="fil ...
input[type=file] 异步上传文件
背景 UI如图所示,其中有一个拍照图标,点击后要选择拍照或者从相册中选择要上传的图片. 拍照上传部分的代码如下 html部分 <div class="take-photo"& ...
html ＜input type=file＞上传文件时，accept属性值汇总，支持文件格式，限制文件格式，限制上传图片的格式
限制文件格式一.示例标签1: <input type="file" accept="image/*" /> accept属性说明: image表 ...
input type=file 实现上传、预览、删除等功能
不知何时,突然对上传文件按钮起了浓厚的兴趣,当然这源于工作的需要.当时为了顺利上线,索性直接引用了jQuery的一个上传组件,简单粗暴. 后来闲下来,就对这个进行了一番研究,然后做了一个简单的Demo ...
type=file文件上传H5新特性
1.语法 <input name="myFile" type="file"> 2.属性(以下三个仅 HTML5支持,因此存在兼容性问题 ) (1)m ...
input type=file图片上传时，先预览
<label><input type="file" id="upload"> </label> js $("#up ...
解决利用＜input type=“file“＞上传文件时，value拿到的是fakePath问题
问题:上传文件之后,直接获取input.value是fakePath路径,因此不能通过此路径访问到文件解决方案: 若不想修改系统配置,可利用js代码解决 oInputFile.onchange = ...

监听input type=file 文件上传取消事件

监听input type=file 文件上传取消事件相关推荐

最新文章

热门文章