Javascript文件預覽-讓圖片、視頻等文件在你的頁面預覽
Javascript文件預覽是一種將文件如圖片、視頻等文件預覽在頁面上的技術。在許多情況下，我們需要在頁面上預覽一些文件，在某些情況下或許您不希望用戶下載文件，因為它可能包含病毒或其它危險的元素。因此在這篇文章中，我們將介紹如何使用JavaScript來預覽這些文件。
圖片預覽
現在讓我們來看一下如何在 web 頁面中預覽圖片。
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>預覽圖片</title>
<script>
function previewImg(event) {
var preview = document.getElementById('preview');
preview.src = URL.createObjectURL(event.target.files[0]);
}
</script>
</head>
<body>
<input type="file" onchange="previewImg(event)" />
<img id="preview"/>
</body>
</html>如上面的代碼所示，當用戶選擇圖片時，預覽將顯示在 id 為 "preview" 的元素上。
視頻預覽
現在讓我們看一下如何在 web 頁面中預覽視頻。
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>預覽視頻</title>
<script>
function previewVideo(event) {
var preview = document.getElementById('preview');
preview.src = URL.createObjectURL(event.target.files[0]);
}
</script>
</head>
<body>
<input type="file" onchange="previewVideo(event)" />
<video id="preview" controls></video>
</body>
</html>如上面的代碼所示，當用戶選擇視頻時，將創建一個 URL 對象預覽視頻。
文本文件預覽
現在讓我們看一下如何在 web 頁面中預覽文本文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>預覽文本文件</title>
</head>
<body>
<input type="file" id="file-input"/>
<pre id="file-content"></pre>
<script>
var fileInput = document.getElementById('file-input');
var fileDisplayArea = document.getElementById('file-content');
fileInput.addEventListener('change', function(e) {
var file = fileInput.files[0];
var textType = /txt.*/;
if (file.type.match(textType)) {
var reader = new FileReader();
reader.onload = function(e) {
fileDisplayArea.innerText = reader.result;
}
reader.readAsText(file);
} else {
fileDisplayArea.innerText = "無法預覽該類型文件";
}
});
</script>
</body>
</html>如上面的代碼所示， 只有類型為 .txt 的文件才可以在 textarea 中預覽。
結論
到底如何預覽文件？本文涵蓋了圖片、視頻和文本文件的預覽方法。這些方法可用于許多不同的場景，特別是在 web 應用程序中，從而提高了用戶體驗。JavaScript 文件預覽技術可以方便有效的在頁面上對文件進行預覽，以此來避免不必要的下載以及對電腦帶來的風險。