0

私はこの質問が少し素朴であることを知っていますが、とにかくここに置くのは良いことだと思います.

HTML ドラッグ アンド ドロップ アップロード ファイルがあります。私の質問は、ユーザーがドロップエリアをクリックしたときに（通常の動作のほかに、ファイルをドロップエリアにドラッグアンドドロップして）ファイル選択ダイアログが開き、ユーザーがファイルを選択したときに、ドロップイベントを呼び出して通常のプロセスを開始できる場合です。ドラッグアンドドロップ。

それは可能ですか、または誰かがそれを行ったり考えたりしたことがありますか?

ありがとう

4

1 に答える 1

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;
}
于 2013-04-09T09:10:15.163 に答える