HTML拖放上傳文件的增強功能？

Question

我知道這個問題有點幼稚，但我認爲把它放在這裏是件好事。

我有一個HTML拖放上傳文件。我的問題是，如果當用戶點擊droparea（在正常行爲拖放文件到droparea旁邊）並且選擇文件對話框打開以及用戶選擇文件時，我們可以調用drop事件並啓動normal拖放。

是否有可能或有人做過或想過這個？

感謝

Answer 1

我已經通過結合砸輸入元素上的事件一定成效。

想在這裏看到的jsfiddle：http://jsfiddle.net/LPVcM/

祝你好運！

HTML

<div id="container"> 
    <div id="instructions">Drag a file here.</div> 
</div> 

的Javascript

var container = document.getElementById('container'), 
    file = null, 
    instructions = document.getElementById('instructions'); 

addFileInput(); 

function addFileInput() { 
    var el = document.createElement('input'); 
    el.setAttribute('type', 'file'); 
    el.setAttribute('class', 'fileinput'); 
    el.addEventListener('drop', function() { 
     instructions.innerHTML += ' Thanks!'; 
    }); 
    el.addEventListener('change', function() { 
     instructions.innerHTML += ' Yum!'; 
    el.className += ' hidden' 
     addFileInput(); 
    }); 
    container.appendChild(el); 
} 

CSS

.fileinput { 
    position: absolute; 
    width: 300px; 
    height: 200px; 
    opacity: 0; 
} 

.fileinput.hidden { 
    display: none; 
} 

#instructions { 
    position: absolute; 
    width: 300px; 
    height: 200px; 
} 

#container { 
    border: 1px solid black; 
    width: 300px; 
    height: 200px; 
}