上传XML并将值存储到输入(XMLHttpRequest无法加载文件）-客户端

Upload XML and store value to input (XMLHttpRequest cannot load file) - Client Side

本文关键字：加载 文件 客户端 XMLHttpRequest XML 存储 输入 上传      更新时间：2023-09-26

注意：这都是客户端

我正在尝试上传一个XML文件，并在文本输入中显示该值。我正在尝试使用AJAX来发布文件。它在Firefox中运行良好，但在Chrome和IE中不起作用。Chrome显示以下错误：

XMLHttpRequest无法加载file:///C:/fakepath/data.xml.跨源请求仅支持以下协议方案：http、data、chrome、chrome扩展、https、chrome资源扩展。

演示：https://jsfiddle.net/6bgzgz0z/

<cats>
    <cat id='output'>
        <name>George</name>
        <gender>male</gender>
        <color>white-mustard</color>
        <age>5 years</age>
    </cat>
    <cat id='output1'>
        <name>Pety</name>
        <gender>female</gender>
        <color>white-black-mustard</color>
        <age>3</age>
    </cat>
</cats>

上面是我试图上传但没有得到结果的XML。

注意：一切都应该是客户端

考虑到您希望只在客户端执行此操作的要求，AJAX是多余的，因为它用于在客户端和服务器之间发出请求，也不用于读取存储在客户端上的文件。

您可以通过使用FileReader()类来实现所需的功能。在解析和遍历数据以查找所需信息之前，您可以使用它来读取XML。试试这个：

$('#submit').click(function() {
    var files = $('#file')[0].files;
    var reader = new FileReader();
    reader.onload = function() {
        var xml = $.parseXML(this.result);
        $(xml).find('cat').each(function() {
            var catName = $(this).find('name').text();
            console.log(catName);
            $('#' + this.id).val(catName);
        })
    };
    reader.readAsText(files[0]);
});

更新的小提琴

要想看到它完全工作，你需要创建一个单独的XML文件，在文件选择器中选择你提到的格式：

<cats>
    <cat id='output'>
        <name>George</name>
        <gender>male</gender>
        <color>white-mustard</color>
        <age>5 years</age>
    </cat>
    <cat id='output1'>
        <name>Pety</name>
        <gender>female</gender>
        <color>white-black-mustard</color>
        <age>3</age>
    </cat>
</cats>

如果您希望看到XML解析工作，这里有一个简单的小提琴拉出基本信息。

相关文章：