开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js 得到file文件名

在JavaScript中获取<input type="file">元素所选文件的文件名，可以通过多种方法实现。以下是基础概念、示例代码及相关说明：

基本概念

当用户通过文件输入选择一个文件时，浏览器会生成一个FileList对象，其中包含了所选文件的信息。每个文件都是一个File对象，可以通过其属性获取文件的详细信息，如文件名、大小、类型等。

获取文件名的方法

方法一：使用`files[0].name`

这是最常用的方法，通过访问FileList中的第一个文件对象的name属性来获取文件名。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>获取文件名示例</title>
</head>
<body>
    <input type="file" id="fileInput">
    <p id="fileName"></p>

    <script>
        document.getElementById('fileInput').addEventListener('change', function(event) {
            const file = event.target.files[0];
            if (file) {
                document.getElementById('fileName').textContent = '选择的文件名是：' + file.name;
            } else {
                document.getElementById('fileName').textContent = '未选择任何文件';
            }
        });
    </script>
</body>
</html>

解释：

监听文件输入的change事件，当用户选择文件时触发。
通过event.target.files获取FileList对象。
访问files[0]获取第一个文件对象，并通过file.name获取文件名。

方法二：使用`URL.createObjectURL`和`<a>`标签

这种方法适用于需要预览文件或处理多个文件的情况。

document.getElementById('fileInput').addEventListener('change', function(event) {
    const files = event.target.files;
    for (let i = 0; i < files.length; i++) {
        console.log('文件名:', files[i].name);
    }
});

解释：

通过循环遍历FileList，可以获取所有选中文件的文件名。

常见问题及解决方法

未选择文件时获取文件名报错
- 解决方法：在访问files[0]之前，先检查files.length是否大于0，确保用户已选择文件。

多个文件选择
- 如果需要处理多个文件，可以使用循环遍历FileList，如方法二所示。
文件名编码问题
- 确保HTML文档的字符集设置为UTF-8，以正确显示各种语言的文件名。

应用场景

文件上传预览
动态显示用户选择的文件信息
表单验证，确保用户选择了特定类型的文件

总结

通过监听文件输入的change事件，并访问event.target.files中的File对象，可以方便地获取用户选择的文件名。根据具体需求，可以选择不同的方法来处理单个或多个文件的文件名获取。

如果在使用过程中遇到其他问题，欢迎进一步提问！

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

有帮助

没帮助

相关·内容

使用bat命令得到文件名列表「建议收藏」

大家好，又见面了，我是你们的朋友全栈君一个文件夹下面有多个excle文件，快速得到文件名列表步骤如下： step1：在文件夹目录下新建一个txt类型的文件 step2：在txt文件中写入如下代码，并保存...DIR *.* /B> LIST.TXT step3：将txt文件改成.bat后缀，双击运行即可得到list.txt。版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。

1.7K3 0

js文件名排序

分享一个今天写的简单的文件名排序 function fileNameCompare(a, b) { if (a == null || b == null) return 0; let...'28-03_01.jpg'} , {name: '28-03_03.jpg'} , {name: '28-02_01.jpg'} , {name: '文件名...1 (1).jpg'} , {name: '文件名10.jpg'} , {name: '文件名2.jpg'} , {name: '文件名1.jpg'}..., {name: undefined} , {name: '文件名1 (1) - 副本.jpg'} ].sort((a, b) => fileNameCompare(a.name

1.6K1 0

File类详解(获取文件名称、大小、路径、创建等)

public File(File parent, String child) ：从父抽象路径名和子路径名字符串创建新的 File实例。..."d:\\aaa"; String child = "bbb.txt"; File file3 = new File(parent, child); // 通过父级File对象和子路径字符串 File...parentDir = new File("d:\\aaa"); String child = "bbb.txt"; File file4 = new File(parentDir, child);...f.getAbsolutePath()); System.out.println("文件构造路径:"+f.getPath()); System.out.println("文件名称...System.out.println("目录长度:"+f2.length()); } } 输出结果：文件绝对路径:d:\aaa\bbb.java 文件构造路径:d:\aaa\bbb.java 文件名称

1.3K2 0

Import File(.CSV) to SAS获取文件夹、文件名称

filename获取文件list 获取文件名以及文件夹list的用途？...当有大量外部文件需要导入到SAS中，我们如果一个文件一个文件的输入文件名导入SAS是一件很没劲的重复的无趣的事情...而且也可能出错...利用SAS语言可以直接在SAS中获取文件名称到数据集中，在通过赋值给...获取文件夹list的作用，与获取文件名类似。。。...Get file name %let fdnm = E:\Sta_pgm\CSV\ ; %put &fdnm.; filename xcl_fil pipe "dir &fdnm.*.CSV /b"...; data file; infile xcl_fil truncover; input file$char1000.; put file=; run; 请不写效果了,效果和上面的一样

2.8K2 0

velocity渲染JS文件,file-node.js分析

velocity渲染JS文件,file-node.js分析 $(function() { var filePath = document.getElementById("filePathRem"...lazy&file-path=" + filePath + "&id=" + node.id, url:"/admin/file/zip/show.action...{filePath}"> file/zip/download?file-path=$!{filePath}">下载 js/file-node.js"> js/editormd.min.js"> ##支持...markdown快速解析 js"> ##支持代码高亮 js"><

6.5K0 0

js得到当前页面的url信息

1，设置或获取对象指定的文件名或路径。 console.log(window.location.pathname) ? 2，设置或获取整个 URL 为字符串。...9，用来得到当前网页的域名 console.log( document.domain); ?

5.4K4 1

Webpack 4 动态切割JS注入文件名

webpack 切割的时候如何加个可以跟随文件名变化的前缀。...效果图解决路径 GG大法+ webpack官方文档官方文档还真的有提供对应的知识，说明如下大体就是就是 [request] 可以拿到实际解析的文件名，来取代默认的索引递增的方式。...categoryName}/intro-register/intro-register.vue`); }; 总结这样做的好处就是文件切割目的达到了,加载的资源文件也清晰，有名字一目了然，而非默认的 0.js...,1.js

1141 0

js input file 转base64

xhtml"> 简单的html5 File...txshow.onclick = function () { input.click(); } } } function readFile() { var file.../image\/\w+/.test(file.type)) { alert("只能选择图片"); return false; }...var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function (...txshow.src = this.result; alert(this.result); } } file

7.4K2 0

QT软件开发-得到唯一文件名-当前时间与GUID

在程序开发过程中，程序里经常会保存一些临时文件到本地，为了文件不重名，一般可以使用GUID或者当前时间来作为命名方式。

4571 0

How to load SVG file into SVGRenderer in three.js

原文： https://stackoverflow.com/questions/33140342/how-to-load-svg-file-into-svgrenderer-in-three-js...I want to import an SVG file that I already have in my computer. How would I do that?..."> js/renderers/SVGRenderer.js"> js/renderers/Projector.js"> js/loaders/SVGLoader.js"> /** * @name LegacySVGLoader * @author mrdoob / http

5.6K3 0

JS获取图片URL并截取文件名和后缀

现在要解决问题，需要获取图片的链接，并把链接中的（图片）文件名提取出来。...打印结果： https://w3h5.com/zb_users/upload/2019/04/201904031554286068121005.png 再用 split('/') 继续拆分： let file... = http.split('/') console.log(file); 打印结果： [0: "https:" 1: "" 2: "www.w3h5.com" 3: "zb_users" 4: "upload..." 5: "2019" 6: "04" 7: "201904031554286068121005.png"] 数组的最后一个就是文件名： console.log(file[file.length - 1

7062 0

js File 转 Base64 图片预览

" name="file" id="file"> ... // 文件类型转换 // File...转 Base64 图片预览 const fileToBase64 = (file, callback) =>{ const reader = new...let _files = document.getElementById('file') _files.addEventListener('change',function(e)...{ console.log(e.target.files[0]) let file = e.target.files[0] // file

8.8K6 1

JS中可能用得到的全部的排序算法

本篇有7k+字, 系统梳理了js中排序算法相关的知识, 希望您能喜欢....原文:JS中可能用得到的全部的排序算法导读排序算法可以称得上是我的盲点, 曾几何时当我知道Chrome的Array.prototype.sort使用了快速排序时, 我的内心是奔溃的(啥是快排, 我只知道冒泡啊...虽然ES6规范如此诱人, 然而目前并没有浏览器支持尾调优化, 相信在不久的将来, 尾调优化就会得到主流浏览器的支持....再将各组连接起来, 便得到一个有序序列. MSD方式适用于位数多的序列. LSD: 由低位为基底, 先从kd开始排序，再对kd-1进行排序，依次重复，直到对k1排序后便得到一个有序序列....本文作者:louis 本文链接:JS中可能用得到的全部的排序算法参考文章 JS家的排序算法 - 简书白话经典算法系列之三希尔排序的实现 - MoreWindows Blog - 博客频道 - CSDN.NET

1.7K2 0

JS获取图片URL并截取文件名和后缀

现在要解决问题，需要获取图片的链接，并把链接中的（图片）文件名提取出来。...https://www.w3h5.com/zb_users/upload/2019/04/201904031554286068121005.png 再用 split('/') 继续拆分： let file... = http.split('/') console.log(file); 打印结果： [0: "https:" 1: "" 2: "www.w3h5.com" 3: "zb_users" 4: "upload..." 5: "2019" 6: "04" 7: "201904031554286068121005.png"] 数组的最后一个就是文件名： console.log(file[file.length - 1...声明：本文由w3h5原创，转载请注明出处：《JS获取图片URL并截取文件名和后缀》 https://www.w3h5.com/post/543.html 本文已加入腾讯云自媒体分享计划 (点击加入)

11.4K2 1

如何用js得到当前页面的url信息方法(JS获取当前网址信息)

设置或获取对象指定的文件名或路径。 alert(window.location.pathname) 设置或获取整个 URL 为字符串。

7.2K7 0

node.js 使用教程-3.gulp-file-include 详细教程

前言 gulp-file-include是gulp插件,它提供了一个 include 方法让我们可以像后端模板那样把公共部分的页面导入进来，实现 html 复用。...name @@age @@socials.fb @@socials.tw gulpfile.js...' })) .pipe(gulp.dest('dist/')); }); 执行命令 gulp fileinclude 就可以得到dist/index.html view.md # 环境 vscode # 环境准备 1.安装 > npm install gulp -g 2.安装md插件 > npm install markdown gulpfile.js...使用 index.html @@for (var i = 0; i < arr.length; i++) { `+arr[i]+` } gulpfile.js

6561 0

【JS】936- File、Blob、dataURL 和 canvas 的应用与转换

File (1) 通常情况下， File 对象是来自用户在一个 input 元素上选择文件后返回的 FileList 对象,也可以是来自由拖放操作生成的 DataTransfer 对象，或者来自 HTMLCanvasElement...File、Blob 转化成 dataURL FileReader 对象允许 Web 应用程序异步读取文件(或原始数据缓冲区)内容，使用 File 或 Blob 对象指定要读取的文件或数据。...function fileToDataURL(file) { let reader = new FileReader() reader.readAsDataURL(file) /...-- * @Date: 2020-11-22 14:33:55 * @information: datadURL File Blob canvas 的互相转化 * * File.prototype...= document.getElementById('input').files[0] console.log('file->', file) if(!

2.5K4 0

js获取input上传文件的文件名和扩展名的方法

使用 js 可以获取 input 上传文件的文件名和扩展名，这里我整理一下具体方法： 1. 使用原生JS获取： CSS代码：给 div 一个内边距，按钮设置样式。...>点击 JS代码：点击 button 按钮时触发事件，如果未选择任何文件会返回 undefined ，如果已选择文件则返回文件名和扩展名...使用 jQuery 获取： CSS 和 HTML 部分代码没变，js 代码如下：我这次使用的是监听 input 的 change 事件，button 按钮可以删掉。...").val() //获取文件名+扩展名 fileName = file.split("\\").pop(); //获取文件名 ...声明：本文由w3h5原创，转载请注明出处：《js获取input上传文件的文件名和扩展名的方法》 https://www.w3h5.com/post/89.html

13.5K0 0

js中根据已知key得到某对象中相对应的value的方法

2481 0

js 2个空数组相加会得到一个空字符串

小菜看到这个答案马上就去百度了一下，得到的结论是这样的，在这里和大家分享一下： js在进行运算时，如果遇到不能计算的单位，就会进行默认转换；隐式转换过程：首先 [] 调用 valueOf() 方法，...得到的还是 []，然后调用 toString() 方法，得到 “”；并且+和-以及其他一些运算符不同,+会默认往字符串转化，而-，*等就会默认往数字转化，写几个例子对比下就清楚了： // + console.log

1K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭