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将为null ...

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兼容的浏览器：

使用FileReader获取文件数据
使用DOMParser将文件解析为字符串：

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

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

1 个答案: