我是網頁設計新手我想制作一個顯示“.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>uj5u.com熱心網友回復：
您需要使用 <pre></pre> 標簽包裝預覽。將 previewinnerHtml 設定為空字串，然后將值附加到它。
reader.onload = function (e) {
document.getElementById("preview").innerHTML = "";
document.getElementById("preview").append(e.target.result);
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/347720.html
標籤：javascript html 形式 文件 预览
上一篇：HTML/CSS-創建粘性覆寫