CODEWITHSUNDEEP
javascripthtml
Elydasian
Elydasian

Reputation: 2066

How to change my code from div tag to textarea?

Here is my code:

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

this code, shows the data from one or more selected files in a div tag, with the id="fileInfo", used in the last line of code...and the 3rd from below

is there a way to make my code work with the textarea, with the id="fileInfo2" ? i also changed the last line to be like this:

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

but id didnt work...

can u help me?

Upvotes: 2

Views: 108

Answers (1)

Theodore K.
Theodore K.

Reputation: 5176

One way to place html insite textarea is to store the existing textarea value and set a new instead of using append. So replace:

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

with 

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

and

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

with

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

Upvotes: 3

Related Questions