JavaScript - 在客户端上传和读取 XML 文件

Question

我正在处理这个需要我在客户端处理 XML 文件的项目。 这是场景： 用户要上传一个 XML 文件，此时应该读取 XML 文件的结构，并且需要根据 XML 文件中的信息填充表格。创建表并填充它没有问题，但我想知道的是我可以在将 XML 文件上传到服务器之前对其进行处理吗？

function parseXML(xml_file){
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {// code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //xmlhttp.open("GET", "books.xml", false);
        xmlhttp.open("GET",xml_file , false);
        xmlhttp.send();
        xmlDoc = xmlhttp.responseXML; 
        alert(xmlDoc);
    }

当我在处理文件后使用上面的代码时，xmlDoc 将为空...

function handleFileSelect(evt) {
    // FileList object  
        var files = evt.target.files;
    //var contents = evt.target.result;
    //alert(contents);
    parseXML(files[0]);


    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
        output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ', f.size, ' bytes, last modified: ', f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a', '</li>');
    }
    document.getElementById('file_list').innerHTML = '<ul>' + output.join('') + '</ul>';
}

有没有办法做到这一点？当然我可以用 php 来做到这一点……将文件上传到服务器，刷新页面并使用 JavaScript 读取最近上传的文件。但是有没有办法在不将 XML 文件上传到服务器的情况下实现这一点？

DOMParse 需要文件路径才能打开：

xhttp.open("GET","books.xml",false)

有没有办法使用 FileReader 读取文件并将实际文件而不是路径传递给 xhttp.open？

Answer 1

这仅适用于兼容 HTML5 的浏览器：

1. 使用FileReader获取文件数据

2. 使用 DOMParser 将文件解析为字符串：

.

var parser = new DOMParser();
var doc = parser.parseFromString( fileAsString, "application/xml");