10

ユーザーがコンピューターからファイルをドラッグ アンド ドロップ (または選択) し、JavaScript を使用してテキスト ボックスに読み込めるようにしたいと考えています。

JavaScript を使用してローカル ファイルをテキスト ボックスに読み込むことはできますか? はいの場合、どのように？

4

3 に答える 3

21

HTML5 に必要なものはすべて、githubのremy/html5demosに含まれていると思います。

例として、http://html5demos.com/file-apiを変更して、テキスト ファイルを受け入れてブラウザーで表示できるようにしました。

jsfiddleを参照してください。


関連するスクリプトを編集:

// modified from http://html5demos.com/file-api
var holder = document.getElementById('holder'),
    state = document.getElementById('status');

if (typeof window.FileReader === 'undefined') {
    state.className = 'fail';
} else {
    state.className = 'success';
    state.innerHTML = 'File API & FileReader available';
}

holder.ondragover = function() {
    this.className = 'hover';
    return false;
};
holder.ondragend = function() {
    this.className = '';
    return false;
};
holder.ondrop = function(e) {
    this.className = '';
    e.preventDefault();

    var file = e.dataTransfer.files[0],
        reader = new FileReader();
    reader.onload = function(event) {
        console.log(event.target);
        holder.innerText = event.target.result;
    };
    console.log(file);
    reader.readAsText(file);

    return false;
};​
于 2012-07-03T15:10:39.750 に答える
3

をチェックしてくださいHTML5 File API: http://www.html5rocks.com/en/tutorials/file/dndfiles/

仕様には、それがどのように機能するかを理解するための良い例もあります:

http://dev.w3.org/2006/webapi/FileAPI/#はじめに

于 2012-07-03T14:55:18.467 に答える