Incorrect position when using import file

Asked

Viewed 54 times

-1

I’d like the numbers on the imported file to show up in the cell phone box, not below, like this one showing up. If anyone can help me with that, I’d appreciate it.

That and the test:

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>TEST</title>
</head>

<body>

<input type="file" id="inputCSV" onchange="pegaCSV(this)">
<div id="CSVsaida"></div>
<div class="line">

    <label>
        <span class="red">*</span>
        Celulares
    </label>
    <textarea name="msgSmsMobile" cols="35" rows="5" class="dest formulario"></textarea>
</div>
</body>
<script>

var leitorDeCSV = new FileReader()

window.onload = function init() {
    leitorDeCSV.onload = leCSV;
}

function pegaCSV(inputFile) {
    var file = inputFile.files[0];
    leitorDeCSV.readAsText(file);
}

function leCSV(evt) {

    var fileArr = evt.target.result.split('\n');
    var strDiv = '<table>';

    for (var i = 0; i < fileArr.length; i++) {
        strDiv += '<tr>';
        var fileLine = fileArr[i].split(',');
        for (var j = 0; j < fileLine.length; j++) {
            strDiv += '<td>' + fileLine[j].trim() + '</td>';
        }
        strDiv += '</tr>';
    }

    strDiv += '</table>';
    var CSVsaida = document.getElementById('CSVsaida');
    CSVsaida.innerHTML = strDiv;
}

</script>
</html>

javascript html input

  • Breno, when you say in the box, you mean inside your textarea name msgSmsMobile?

  • Even Daniel, could you help me.

  • Breno, I can, but this html formatting you created, does it have to exist? Because by default, the textarea is plain text, if you tag, it will not be rendered, it will simply appear the same.

  • Can’t be any other kind without problem the important and the page stay functional...

1 answer

0

Breno, one way to put the text of the file in the textarea is as follows:

var leitorDeCSV = new FileReader()

window.onload = function init() {
    leitorDeCSV.onload = leCSV;
}

function pegaCSV(inputFile) {
    var file = inputFile.files[0];
    leitorDeCSV.readAsText(file);
}

function leCSV(evt) {
    var csvFile = evt.target.result;
    var textArea = document.getElementById('msgSmsMobile');

    textArea.value = csvFile;
}
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>TEST</title>
  </head>

  <body>
    <input type="file" id="inputCSV" onchange="pegaCSV(this)">
    <div class="line">

        <label>
            <span class="red">*</span>
            Celulares
        </label>

        <textarea id="msgSmsMobile" name="msgSmsMobile" cols="35" rows="5" class="dest formulario"></textarea>
    </div>
  </body>

</html>

Thus, the content of the read file does not appear directly in the html body, being restricted to the defined textarea.

  • Great, then mark the answer as correct/please accept, otherwise your question remains "open".

  • how can I close this post?

  • You do not close, you give the vote/accept the answer you answered, so it appears as answered on the site.

Browser other questions tagged javascript html input

You are not signed in. Login or sign up in order to post.