html file文件内容,HTML5基础知识 - JavaScript API - File - 读取文件内容

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

// Content section used alot

var content = document.getElementById('content');

if (!window.FileReader) {

content.innerHTML = "

This browser doesnt support the File API

";

} else {

// Page Layout

content.innerHTML =

'

Pick a text file or drag one into this area

' +

'Content:

' +

'

';

// Input handler

document.getElementById('file').onchange = function() {

readFileAsText(this.files[0]);

};

// Drag and drop methods

content.ondragover = function(e) {

e.preventDefault();

return false;

};

content.ondrop = function(event) {

e.stopPropagation();

readFileAsText(event.dataTransfer.files[0]);

return false;

};

function readFileAsText(file) {

var reader = new FileReader();

reader.readAsText(file);

reader.onload = function(event) {

document.getElementById('file-content').textContent =

event.target.result;

};

reader.onerror = function() {

document.getElementById('file-content').innerHTML = 'Unable to read ' + file.fileName;

};

}

}