jQuery 获取类型文件的输入值

Get value of input of type file

提问by Miguel Moura

I have the following HTML markup:

我有以下 HTML 标记：

<div>
  <a>browse<input type="file" name="annex"></a>
  <span class="filename"></span>
</div>

I am using this markup to style the file input with CSS.

我正在使用此标记用 CSS 设置文件输入的样式。

I would like to show the file name (filename.ext) in the span with class "filename".

我想在带有类“filename”的跨度中显示文件名（filename.ext）。

I tried the following with JQuery:

我用 JQuery 尝试了以下操作：

$('.file').on('file', function (event, files, label) {
  $('.path').html($(this).val().replace(/\/g, '/').replace(/.*\//, ''));
  alert($(this).val());
});

The span is still empty and the alert result is also empty.

跨度仍然为空，警报结果也为空。

How can I do this?

我怎样才能做到这一点？

Thank You, Miguel

谢谢你，米格尔

回答by Sergio

Try this:

尝试这个：

$('input[type="file"]').on('change', function (event, files, label) {
    var file_name = this.value.replace(/\/g, '/').replace(/.*\//, '')
    $('.filename').text(file_name);
});

Demo here

演示在这里

回答by Zathrus Writer

This is not possible with JavaScript, as it is considered insecure for the script to read your local file paths.

这对于 JavaScript是不可能的，因为脚本读取本地文件路径被认为是不安全的。

However, if you're creating an HTML5 site, you might be luckier with the HTML5 File API.

但是，如果您正在创建 HTML5 站点，那么使用HTML5 文件 API可能会更幸运。

Also, you might want to check this interesting link over here.....

此外，您可能想在这里查看这个有趣的链接......

回答by Vaibs_Cool

You can read it, but you can't set it. so it won't have a value until you click on it and pick a file.

你可以读取它，但你不能设置它。因此，在您单击它并选择一个文件之前，它不会有任何值。

Even then, the value will likely be mangled with something like c:\fakepath\ to keep the details of the user's filesystem private.

即便如此，该值也可能会被 c:\fakepath\ 之类的东西弄乱，以保持用户文件系统的详细信息不公开。

Reference Can't get value of input type="file"?

参考无法获取输入类型=“文件”的值？

Try out this link Get filename from input [type='file'] using jQuery

试试这个链接Get filename from input [type='file'] using jQuery