javascript - 如何将我的代码从 div 标签更改为 textarea？

Question

这是我的代码:

<h1>JavaScript File API demo</h1>
<div id="container">
<label>Upload files to local repository:</label><input type="file" accept=".js" id="uploaded" multiple="multiple"/>
<div id="fileInfo" ></div>

<textarea rows="4" cols="50" id="fileInfo2"></textarea> 

</div>

<p></p>

<script>
$(document).ready(function() {

  if(!(window.File && window.FileReader && window.FileList && window.Blob)){
    $('#fileContent, input, button, #examples').fadeOut("fast");
    $('<p>Oh no, you need a browser that supports File API. How about <a href="http://www.google.com/chrome">Google/a>?</p>').appendTo('#container');
  } else {
          $("#uploaded").change(function (e) {
                var files = e.target.files; // FileList object
                // 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>');
                  var reader = new FileReader();
                  reader.onload = function(e) {
                      $("#fileInfo").append("<li> Data from file: "+"<br/>" + e.target.result.replace(/\n/g, "<br>\&nbsp") + "</li>");
                  };
                  reader.readAsText(f);
                }
                $("#fileInfo").append('<ul>' + output.join('') + n/a +'</ul>' );
          });
  }
});
</script>

这段代码，在 div 标签中显示来自一个或多个选定文件的数据，id="fileInfo"，用于代码的最后一行......和下​​面的第 3 行

有没有办法让我的代码使用 id="fileInfo2"的文本区域？我也把最后一行改成了这样:

$("#fileInfo2").append("<li> Data from file: "+"<br/>" + e.target.result.replace(/\n/g, "<br>") + "</li>");
$("#fileInfo2").append('<ul>' + output.join('') + n/a +'</ul>' );

但是 id 没有用...

你能帮帮我吗？

Answer 1

将 html 放置在文本区域中的一种方法是存储现有的文本区域值并设置一个新值而不是使用 append。所以替换:

$("#fileInfo2").append("<li> Data from file: "+"<br/>" + e.target.result.replace(/\n/g, "<br>") + "</li>");

与

var existingValue = $("#fileInfo2").val();
$("#fileInfo2").val(existingValue+"<li> Data from file: "+"<br/>" + e.target.result.replace(/\n/g, "<br>\&nbsp") + "</li>");

和

$("#fileInfo2").append('<ul>' + output.join('') + n/a +'</ul>' );

与

var existingValue = $("#fileInfo2").val();
$("#fileInfo2").val(existingValue+'<ul>' + output.join('') + n/a +'</ul>' );