jQuery 对 html 的 input file 文件选择完成 和 取消判定（转载）

最新推荐文章于 2024-05-27 17:30:30 发布
最新推荐文章于 2024-05-27 17:30:30 发布
阅读量1.3k 收藏
点赞数
文章标签： jquery html javascript
原文链接：https://blog.csdn.net/yxp_xa/article/details/103696863
版权

做个记录
代码详细请查看原文链接

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>input file</title>
</head>
<body>
    <a href="javascript:fclick();">浏览</a>
    <p></p>
    <input type="file">  //如果你想让用户选择多个文件，只需在 input 元素上使用 multiple 属性
    <script>
        document.querySelector('input').style.display = 'none';
        function fclick() {
            document.querySelector('p').innerHTML = "打开文件...";
            document.querySelector('input').click();
        }
        document.querySelector('input').onchange = function () {
            files = this.files[0];
            if (files) {
                console.log("已选定文件", files.name)
                
            } else {
                console.log('取消操作');
                
            }
        }
    </script>
</body>
</html>
————————————————
版权声明：本文为CSDN博主「yxp_xa」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/yxp_xa/article/details/103696863

其他js操作input file文档资料：

https://developer.mozilla.org/zh-CN/docs/Web/API/File/Using_files_from_web_applications

我的内心只有学习
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
input file上传文件样式支持html5的浏览器解决方案
12-13
一个是file上传控件在火狐下无法通过css改变width，另一个是file上传控件在不同的浏览器下的外观和行为都不一样。 下面是file上传控件在IE10，firefox16，chrome22,opera12,safari5.1.7里的截图：  在IE10里，双击...
jQuery动态添加input type=”file”
12-06
有时候需要在页面上允许用户上传多个文件，个数由用户自己决定，个数多了也可以删除，使用jQuery可以很简单的实现这个功能。 先给大家展示下效果图： <!DOCTYPE html> <html> <head> <title&...
模拟input file 文件框“取消”按钮事件
My_Soul_的博客
06-01 2443
在通过input file实现文件上传的功能时，通过为当前window添加focus事件的方式来模拟取消事件
html图片上传选择文件后的事件,bootstrap-fileinput插件，上传成功后事件
weixin_39636099的博客
06-05 742
注意：这里区分了是同步仍是异步同步的回调走 filebatchuploadsuccess(我把全部的都试了，才发现同步时会走这个方法)异步的回调走 fileuploadedhtml配置项uploadAsync: false,//同步上传bootstrap官方文档http://bootstrap-fileinput.com/events.html异步//初始化头像上传插件$("#portrait")...
20240527每日前端-------聊聊前端input file 文件框“取消”按钮事件
最新发布
weixin_42678822的博客
05-27 312
基于此点，我们可以监听focus事件，设置一个setTimeout ,那只要控制这个focus事件在change事件之后执行，就可以通过设置一个变量和setTimeout方法实现。但是如果，这个时候点击取消按钮，或者x关闭弹窗，原生的input标签是无法监听取消事件的。并且取消也不会触发input的change事件，这种情况下该怎么处理？浏览器页面获取焦点事件早于 onchange 事件约20毫秒。
监听input type=file 文件上传取消事件
猿小龙
09-04 5324
<input type="file" id="files"> var batchUpload = document.querySelector('#files'); files.click(); files.addEventListener('change', function () { var filesList = document.querySe...
input type=file 捕捉完成选择事件
小米人的博客
11-23 1908
问题：第一次选择文件或每次都选择不同文件时好使，但如果我两次都选择同一个文件，就触发不了了； 解决：将value置为空，就解决了。 importMetaDataObject(e: any): void { if (!window.FileReader) { this.$notify.error('您的浏览器不支持FileReader！请升级浏览器'); return; } let reader: any = new FileReader(); co
如何检测 html 的 input file 控件在文件输入时，用户点击了“取消”
yxp 的博客
12-25 2749
在使用 input file 控件监听用户文件选择弹出框的取消动作，出现了很大困难，input file 设计为文件打开动作与 change 事件相关，因此在 change事件内对取消动作判定无效，因为 change 事件不会被激发。所以判定代码不会执行。
将input file的选择的文件清空的两种解决方案
09-04
在网页表单中，`<input type="file">`元素用于让用户选择本地文件进行上传。在某些场景下，用户可能需要清空已选择的文件，例如在错误选择或需要重新选择文件时。本文将详细解释两种不同的方法来实现这一功能。 ###...
jquery获取file表单选择文件的路径、名字、大小、类型
12-29
在使用file表单时想知道选择的文件的路径、名字、大小、类型？ 二、知识点 1.input表单会触发change事件 2.获取路径 触发这个事件的对象调用val()函数 3.文件名 触发事件后会有一个事件对象e.currentTarget.files...
jQuery-form.js、FormData、html input file、easyuiFileBox的文件上传
11-20
 使用FormData方式提交上传附件与相关数据  同时实现jQuery-form.js附件上传功能  同时实现标准的html input file提交  同时实现easyuiFileBox与标准的ajax附件上传功能 有数据库，下载直接能运行
input 标签类型为file时, 取消文件选择的判断
阿豪
11-20 943
原文链接: input 标签类型为file时, 取消文件选择的判断 ...
判断是否取消上传文件
wtt7331的博客
03-31 530
默认的input上传文件，无法监听到选取文件窗口上的取消按钮后的事件，想了一个曲线救国的方法，下面是例子 <button onclick="upFile()">上传文件</button> <input type="file" style="display: none;" name="file" id="file" /> <input type="text" autocomplete="off" style="opacity: 0;width: 0px;h
LiveNVR H5无插件直播方案前端构建之：如何播放HLS
04-28 266
之前在进行LiveNVR多屏开发的时候，由于多屏功能不需要在手机端展示出来(pc多播放为RTMP，手机端播放为HLS)，因此只注意到了引用videojs来进行rtmp的播放。由于不同项目需求不同，对hls流的播放也需要体现出来。 videojs在播放rtmp时，是调用Flash来进行播放的，在播放hls时是调用h5来播放的。 <source src="hls地址" ...
jquery案例17——手机端监听点击、长按、移动事件
努力、拼搏、奋进
06-24 1328
jq监听点击、长按、移动事件
jq ajax input file,基于jq的input file文件上传
weixin_39605296的博客
08-05 739
input file文件上传很多人都遇见过，就样式问题就有一大堆的问题，默认样式实在是不敢恭维，但在此今天不讨论样式的问题，只给一个大致的思路，一个div包括一个span和一个input，分别设置两个的定位，然后给input设置opacity为0，设置好宽度充满div，在设置好span的样式即可。众所周知，ajax不能传递文件，但是html的formdata可以。html代码1234567选择本地...
Jquery判断input是否选择好了文件
热门推荐
hulufeng1203的专栏
04-21 1万+
var fileFlag = false;  $("input[name='filePath']").each(function(){  if($(this).val()!="") {  fileFlag = true;  }  });  if(!fileFlag) {  alert("请选择好文件!"); return; }
js jquery input的type=file上传文件 选择后 触发事件[带PHP上传代码]
牧人
04-16 6178
CDN jquery <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> jquery 选择后触发代码 //jquery <script> $("#file1").change(function(e){ var filec = $("#file1").get(0).files[0]; if(filec){ //文件已经选择好 下面可以写自己的上传代码了
jquery 删除input file 中的文件
03-28
由于安全限制，浏览器不允许通过 JavaScript 访问或修改 input type="file" 的值，因此无法直接删除文件。 但是，可以通过以下方法清除文件： 1. 重置表单 将 input type="file" 包含在表单中，可以通过重置表单来清空 input 的值。 例如： ```html <form id="myForm"> <input type="file" name="myFile"> </form> <button onclick="document.getElementById('myForm').reset()">Clear File</button> ``` 2. 创建新的 input 元素 可以通过 JavaScript 创建一个新的 input 元素，并将其替换为原来的 input 元素。这样可以清除 input 的值。 例如： ```html <input type="file" id="myFile"> <button onclick="clearFile()">Clear File</button> <script> function clearFile() { var input = document.createElement('input'); input.type = 'file'; input.id = 'myFile'; document.getElementById('myFile').parentNode.replaceChild(input, document.getElementById('myFile')); } </script> ``` 两种方法都可以清除 input 的值，但是第二种方法可以在不重置整个表单的情况下只清除一个 input 的值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值