Question

我有以下HTML标记：

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

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

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

我用JQuery尝试了以下内容：

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

范围仍为空，警报结果也为空。

我该怎么做？

谢谢你，米格尔

Answer 1

试试这个：

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

演示here

Answer 2

使用JavaScript 无法实现，因为脚本读取本地文件路径被认为是不安全的。

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

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

Answer 3

您可以阅读，但无法设置。所以在你点击它并选择一个文件之前它不会有价值。

即使这样，该值也可能会被c：\ fakepath \之类的内容破坏，以保持用户文件系统的详细信息。

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

试用此链接Get filename from input [type='file'] using jQuery

获取类型文件的输入值

3 个答案:

演示here