监听 input上传文件, 获取文件名称,
程序员文章站
2023-08-26 15:58:15
导入文件:
<div class="import-box pr" >
<span class="model-address-txt">导入文件:</span>
<input type="text" class="address-input js_address-input input-wid" readonly>
<label class="file-box" for="file">
<span class="look-file">浏览</span>
<input id="file" type="file" class="file-input js_file-input" >
</label>
</div>
//监听input
$(".js_file-input").on("change",function (e) {
var e = e || window.event;
//获取 文件 个数 取消的时候使用
var files = e.target.files;
if(files.length>0){
// 获取文件名 并显示文件名
var filename = files[0].name;
$(".js_address-input").val(filename);
}else{
//清空文件名
$(".js_address-input").val("");
}
});
获取 event下的target的name值,利用 length为判断条件,小伙伴,可以先打印一下看看,这样利于理解,不喜勿喷!谢谢
推荐阅读
-
SpringBoot文件上传控制及Java 获取和判断文件头信息
-
Spring boot + LayIM + t-io 实现文件上传、 监听用户状态的实例代码
-
input file上传文件样式支持html5的浏览器解决方案
-
web.py获取上传文件名的正确方法
-
Asp.Net或WebAPI获取表单数据流(批量文件上传)
-
vue中使用input[type="file"]实现文件上传功能
-
Django后台获取前端post上传的文件方法
-
Java 实现实时监听文件夹是否有新文件增加并上传服务器功能
-
fileupload控件上传文章(分享fileupload获取文件路径)
-
fileupload控件上传文章(分享fileupload获取文件路径)