Question

我知道这个问题有点幼稚，但我认为无论如何都把它放在这里是件好事。

我有一个HTML拖放上传文件。我的问题是，如果有可能当用户点击droparea（旁边的正常行为拖放文件到droparea）并打开选择文件对话框并且当用户选择文件时，我们可以调用drop事件并启动正常的过程拖放。

是否有可能或有人做过或想过这个？

由于

Answer 1

通过绑定到输入元素上的drop事件，我获得了一些成功。

请在此处查看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;
}

增强HTML拖放上传文件？

1 个答案: