读取xml文件有什么不对？

这是简单的HTML文件中读取XML读取xml文件有什么不对？

<!DOCTYPE html> 
<html lang="es"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <title>simple script javascript</title> 
    <script src="scripts/jquery-3.2.1.min.js"></script> 
    <script src="scripts/lector.js"> </script> 
</head> 
<body> 
    <h1>"web is running"</h1> 
    <input type="file" id="file-input" /> 
    <h3>Contenido del archivo:</h3> 
    <pre id="contenido-archivo"></pre> 
</body>

和lector.js如下：

function leerArchivo(e) { 
    var archivo = e.target.files[0]; 
    if (!archivo) { 
     return; 
    } 
    var lector = new FileReader(); 
    lector.onload = function(e) { 
     var contenido = e.target.result; 
     mostrarContenido(contenido); 
    }; 
    lector.readAsText(archivo); 
    } 
    function mostrarContenido(contenido) { 
    var elemento = document.getElementById('contenido-archivo'); 
    elemento.innerHTML = contenido; 
    } 
    document.getElementById('file-input') 
    .addEventListener('change', leerArchivo, false); 
document.getElementById('file-input').addEventListener('change', leerArchivo, false); 
console.log(contenido);

返回此错误：

无法读取属性 '的addEventListener' 的null

有什么不对？

来源

2017-08-18 kamome

做这个标记与id'file-input'存在于html中吗？ 'document.getElementById（'file-input'）' – DevDio

这是返回null：

document.getElementById('file-input')

由于执行代码的页面上存在元件之前。即使在完整文档加载完成之前，JavaScript仍然按照在HTML文档中找到的顺序进行处理。

可以移动的JavaScript页面的末尾：

<!DOCTYPE html> 
<html lang="es"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <title>simple script javascript</title> 
    <script src="scripts/jquery-3.2.1.min.js"></script> 
</head> 
<body> 
    <h1>"web is running"</h1> 
    <input type="file" id="file-input" /> 
    <h3>Contenido del archivo:</h3> 
    <pre id="contenido-archivo"></pre> 
    <script src="scripts/lector.js"></script> 
</body>

（jQuery库仍然可以在页面的开始，如果你想加载，因为它不会立即尝试与互动但是由于脚本试图与页面交互，所以需要等待页面加载。）

另外，因为您无论如何都要加载jQuery，您可以使用它轻松地等待该文件已准备就绪。这样的事情：

$(function() { 
    document.getElementById('file-input').addEventListener('change', leerArchivo, false); 
    document.getElementById('file-input').addEventListener('change', leerArchivo, false); 
    console.log(contenido); 
});

来源

2017-08-18 10:00:43 David

谢谢。它工作，我理解这件事。 – kamome

读取xml文件有什么不对？

回答

相关问题