Javascript：有没有办法获取拖入文件的文件名？

Question

当用户拖入文件时，Javascript 中是否有办法检测其文件名 onDragEnter（不是在上传后）？

Answer 1

并非每个浏览器都支持将文件拖到文件输入端（OS X 上的 FF4 肯定不支持），但您可以在change 事件中检查文件输入的值，这应该提供跨浏览器的统一结果。

根据浏览器的不同，你可以检查的值

<input type="file" id="foo" />

像这样：

// vanilla JS
var filename = document.getElementById('foo').value;

// jQuery
var filename = $('#foo').val();

您可以在 change 侦听器中执行此操作，如下所示（下面 jsFiddle 中的 jQuery 示例）：

function alertFileName()
{
    alert(this.value);
}

var input = document.getElementById('foo');

// not IE friendly; use `attachEvent` instead
input.addEventListener('change', alertFilename, false);

如果您上传一个名为bar.txt 的文件，filename 将是：

• 'C:\fakepath\bar.txt'（铬）
• 'bar.txt'（Firefox 4、Safari）
• ？？？ (IE)

我目前不准备测试 IE；随时try it yourself。