时间戳

首页 > 解决方案 > 我想预览包含 html 代码的 div 标签内的文本文件，但文件的 html 部分被呈现为 html 而不是文本

javascript - 我想预览包含 html 代码的 div 标签内的文本文件，但文件的 html 部分被呈现为 html 而不是文本

问题描述

我是网页设计的新手，我想制作一个显示“.txt”文件文本的网页。当我在文本文件中编写任何 html 代码时，如果显示文本，则会呈现它

我想预览文本文件中的所有内容。我想在文件中显示 html 代码，即使文本文件中的代码包含 html 它应该显示为 html 代码。我不希望它被呈现为 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>

标签： javascripthtmlformsfilepreview

解决方案

您需要使用 <pre></pre> 标签包装预览。将预览 innerHtml 设置为空字符串，然后将值附加到它。

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

推荐阅读