HTML5拖放:使用JavaScript在文本框中加载文本文件

前端之家收集整理的这篇文章主要介绍了HTML5拖放:使用JavaScript在文本框中加载文本文件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想允许用户从他们的计算机中拖放(或选择)一个文件,并使用 JavaScript将其加载到文本框中.

是否可以将带有JavaScript的本地文件加载到文本框中?如果是,那怎么样?

解决方法

我认为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;
};​
原文链接:https://www.f2er.com/html5/168351.html

猜你在找的HTML5相关文章