javascript - HTML 拖放上传文件的增强功能？

Question

我知道这个问题有点幼稚，但我觉得还是放在这里还是不错的。

我有一个 HTML 拖放上传文件。我的问题是，如果有可能当用户单击放置区域（除了正常行为将文件拖放到放置区域之外）并打开选择文件对话框以及用户选择文件时，我们可以调用放置事件并开始正常的过程拖放。

是否有可能或有人做过或想过吗？

谢谢

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;
}