使用 jQuery 在 Textarea 中显示 XML 文件的所有内容答案

【问题标题】：Show XML file all content in Textarea using jQuery使用 jQuery 在 Textarea 中显示 XML 文件的所有内容
【发布时间】：2021-10-15 03:48:47
【问题描述】：

当用户从 HTML 输入文件类型中选择文件时，我想在 <textarea> 中显示 XML 文件的内容。我为它编写了一些代码，但不是在<textarea> 中显示 XML 值，而是显示 XML 文件的路径。

请查看我的代码并告诉我应该怎么做才能在<textarea> 中显示 XML 文件内容。

$(document).ready(function() {
  $('.file').bind("change", function() {
    $('.textarea').val($('.file').val())
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='file' class='file'>
<textarea class='textarea'></textarea>

【问题讨论】：

您无法通过 jQuery val() 方法读取 XML 文件。见stackoverflow.com/questions/1199180/…。
我想用 jQuery 来做，你能建议我用什么来代替 val() 吗？

标签： jquery xml

【解决方案1】：

要读取文件，您必须使用 FileReader 对象，它从文件输入中获取 File 对象，您可以将其作为文本读取并显示在文本区域中。

$(document).ready(function(){
  $('.file').bind("change",function() {
    var fr = new FileReader();
    fr.readAsText(this.files[0]);
    fr.onload = e => {
      $('.textarea').val(e.target.result);
    }        
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='file' class='file'>
<textarea class='textarea'></textarea>

【讨论】：

【解决方案2】：

要在 javascript 中读取文件，您必须使用 FileReader

你可以试试这样的

$(document).ready(function(){
    $('.file').bind("change",function() {
    // get file xml from input
    let fileXML = document.getElementById("file").files[0]
    let fileReader = new FileReader();
    fileReader.readAsText(fileXML);
    fileReader.onloadend = function(){
         $('.textarea').val(fileReader.result)
    }
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<input id="file" type='file' class='file'>
<div>
  <textarea class='textarea' rows="8" cols="50"></textarea>
</div>

演示 jsfiddle：https://jsfiddle.net/t5f71mos/

【讨论】：