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/#introduction

于 2012-07-03T14:55:18.467 回答
1

也许这会对你们大多数人有所帮助：

在可拖动目标（源元素）上触发的事件：

ondragstart - 当用户开始拖动元素时发生

ondrag - 拖动元素时发生

ondragend - 当用户完成拖动元素时发生

在放置目标上触发的事件：

ondragenter - 当被拖动的元素进入放置目标时发生

ondragover - 当被拖动的元素在放置目标上方时发生

ondragleave - 当被拖动的元素离开放置目标时发生

ondrop - 当拖动的元素被放置在放置目标上时发生

于 2021-05-18T08:52:20.870 回答