获取类型文件的输入值答案

【问题标题】：Get value of input of type file获取类型文件的输入值
【发布时间】：2013-10-09 03:13:03
【问题描述】：

我有以下 HTML 标记：

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

我正在使用这个标记来设置带有 CSS 的文件输入样式。

我想在类“文件名”的跨度中显示文件名 (filename.ext)。

我用 JQuery 尝试了以下操作：

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

span还是空的，alert结果也是空的。

我该怎么做？

谢谢你，米格尔

【问题讨论】：

jsfiddle.net/LvsYc/638
您的选择器正在寻找 class= 文件。要么将类添加到您的输入中，要么更改您的选择器以查找 type = file 属性：$('[type="value"]')
发布了一个关于这个的新答案...

标签： jquery

【解决方案1】：

试试这个：

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

演示here

【讨论】：

【解决方案2】：

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

即使这样，该值也可能会被 c:\fakepath\ 之类的东西破坏，以保持用户文件系统的详细信息的私密性。

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

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

【讨论】：

【解决方案3】：

这是 JavaScript 无法做到的，因为脚本读取本地文件路径被认为是不安全的。

但是，如果您要创建 HTML5 网站，使用HTML5 File API 可能会更幸运。

另外，您可能需要检查this interesting link over here.....

【讨论】：