使用 jQuery 获取文件输入的选定文件名而不带路径

IT技术 javascript jquery get filenames
2021-03-01 04:10:42

我用过这个:

$('input[type=file]').val()

选择文件名,但它返回完整路径,如“C:\fakepath\filename.doc”。“fakepath”部分实际上在那里 - 不确定它是否应该存在,但这是我第一次使用文件上传的文件名。

我怎样才能得到文件名(filename.doc)?

6个回答
var filename = $('input[type=file]').val().split('\\').pop();

或者你可以这样做(因为它总是C:\fakepath出于安全原因添加):

var filename = $('input[type=file]').val().replace(/C:\\fakepath\\/i, '')
@Alex:哇,这太疯狂了。因此,这实际上只是一种解决方法,可以解决某些人的糟糕 JS 代码永远无法修复的问题。我在 Mac 上运行 Safari,我在那里看到“C:\fakepath\”。(在jsfiddle 中使用它。)
2021-04-24 04:10:42
正是我需要的,manji!我也需要检查扩展名,所以我以这种方式使用了你的例子: var extension = filename.split('.').pop(); 也要得到那个!谢谢!
2021-05-01 04:10:42
@MikeDeSimone 我已经测试过 split('\\').pop(); 在 Win 7、Ubuntu 11.04 和 Mac OS X 上运行良好。
2021-05-01 04:10:42
@VítorBaptista Windows 文件的名称中不能有反斜杠。在 MacOS 上是可能的,尽管“您应该避免在文件和文件夹的名称中使用冒号和斜杠,因为某些操作系统和驱动器格式使用这些字符作为目录分隔符”,如Apple 网站所述
2021-05-01 04:10:42
Fakepath大写的F吗?
2021-05-13 04:10:42

你只需要执行下面的代码。第一个 [0] 是访问 HTML 元素,第二个 [0] 是访问文件上传的第一个文件(我包含了一个验证,以防没有文件):

    var filename = $('input[type=file]')[0].files.length ? ('input[type=file]')[0].files[0].name : "";
是的,你是对的,但目的只是放置代码来获取名称,因为当代码从硬编码位置获取名称时,有必要检查是否有一些文件(对于这种情况,我们正在讨论只有一个文件,但可以有更多,并且代码需要遍历所有元素)。但可以肯定的是,我将更新代码并包含此验证。
2021-05-02 04:10:42
使用此选项时要考虑的一件事:当您再次单击“选择文件”按钮以显示打开的文件窗口时,然后单击转义按钮,将引发控制台错误。
2021-05-13 04:10:42

ChromeC:\fakepath\...出于安全原因返回- 网站应该无法获取有关您计算机的信息,例如您计算机上文件的路径。

要仅获取字符串的文件名部分,您可以使用split()...

var file = path.split('\\').pop();

js小提琴

...或正则表达式...

var file = path.match(/\\([^\\]+)$/)[1];

js小提琴

……或者lastIndexOf()……

var file = path.substr(path.lastIndexOf('\\') + 1);

js小提琴

获取所有操作系统的路径

var filename = $('input[type=file]').val().replace(/.*(\/|\\)/, '');

例子

C:\fakepath\filename.doc 
/var/fakepath/filename.doc

都返回

filename.doc
filename.doc
示例代码var filename = $('input[type=file]').val().replace(/.*(\/|\\)/, '');使用 jQuery。
2021-04-25 04:10:42

这是我的做法,效果很好。

在你的 HTML 中做:

<input type="file" name="Att_AttributeID" onchange="fileSelect(event)" class="inputField" />

然后在你的 js 文件中创建一个简单的函数:

function fileSelect(id, e){
    console.log(e.target.files[0].name);
}

如果您正在处理多个文件,您还应该能够通过循环获取列表:

e.target.files[0].name
由于字段 ID 在这个上下文中什么都不做,JS 中的函数应该少 1 个参数,只是 e 而不是 fileSelect(id,e) 只是 fileSelect(e)。感谢您的解决方案:)。
2021-05-13 04:10:42