I want to preview a text file inside a div tag which contains html code but the html part of the fil-CodePudding

I'm new to web design I wanted to make a web page which displays text of a ".txt" file. When I wrote any html code inside text file it is rendered instead if displaying the text

I wanted to preview all the contents in the text file. I want to display the html code in the file even though the code inside the text file contains html it should be displayed as a html code . I dont want it to be rendered as a html

function fileValidation(){
    var fileInput = document.getElementById('file');
    var filePath = fileInput.value;
    var allowedExtensions = /(\.txt)$/i;
    if(!allowedExtensions.exec(filePath)){
        alert('Please upload file having extensions .txt only.');
        fileInput.value = '';
        return false;
    }else{
        //Image preview
        if (fileInput.files && fileInput.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('preview').innerHTML = e.target.result;
            };
            reader.readAsText(fileInput.files[0]);
        }
    }
}

<!DOCTYPE html>
<html lang="en">
    
    <head>
        
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <title>
            WannaCry
        </title>
        <link rel="stylesheet" href="css/styles.css">

    </head>
    
    <body>
        
        <div class="container">
            
            <div class="heading">

                CRYPTOR

            </div>
            <div class="preview" id="preview">
                 your file contents are displayed here ... 
            </div>
            <div class="inp">

                    <form method="post" action=""  enctype = "multipart/form-data">
                    
                        <input type="file" name="file_name" id="file" class="inputfile" onchange="return fileValidation()"/>
                        <label for="file">Select a file</label>
                    
                

                    <div class="buttons">
                        <button class="encrypt" type="submit">
                            Encrypt
                        </button>
                        
                        <button class="decrypt" type="submit">
                            Decrypt
                        </button>
                    </div>
                    
                </form>

            </div>
        </div>
    <script src="js/index.js"></script>
    </body>
</html>

CodePudding user response：

You need to wrap the preview with <pre></pre> tag. Set preview innerHtml to empty string and then append the value to it.

   reader.onload = function (e) {
        document.getElementById("preview").innerHTML = "";
        document.getElementById("preview").append(e.target.result);
   };