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

Posted 2023-02-16

【中文标题】使用 jQuery 在 Textarea 中显示 XML 文件的所有内容

【英文标题】：Show XML file all content in Textarea using jQuery

【发布时间】：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 文件。见***.com/questions/1199180/…。

我想用 jQuery 来做，你能建议我用什么来代替 val() 吗？

【参考方案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/