时间戳

首页 > 解决方案 > 使用 jQuery 在 Textarea 中显示 XML 文件的所有内容

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

问题描述

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

请看一下我的代码并告诉我应该怎么做才能在<textarea>.

$(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>

标签： jqueryxml

解决方案

要读取文件，您必须使用 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>

推荐阅读