Javascript：有沒有辦法獲得拖拽文件的文件名？

Question

當用戶在文件中拖動時，Javascript中是否有方法檢測其在DragEnter上的文件名（不是在上傳後）？

Answer 1

並非所有的瀏覽器支持拖動文件到文件輸入（FF4在OS X上肯定沒有），但你可以檢查上change事件，應提供跨瀏覽器的統一結果文件輸入的值。

取決於瀏覽器，你可以檢查的

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

值，像這樣：

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

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

你會做這樣的change聽衆裏面，像這樣（例如jQuery的jsFiddle）：

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'（火狐4，Safari瀏覽器）
• ??? （IE）

我目前沒有設置測試IE;請隨時致電try it yourself。