一、预览本地图片
<!DOCTYPE html>
<html>
<body>
<input type="file" accept="image/*" onchange="previewImage(this)">
<img id="preview" src="" alt="图片预览">
<script>
function previewImage(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById('preview').src = e.target.result;
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
</body>
</html>
二、预览本地音频
<!DOCTYPE html>
<html>
<body>
<input type="file" accept="audio/*" onchange="previewAudio(this)">
<audio id="preview" controls>
您的浏览器不支持 audio 元素。
</audio>
<script>
function previewAudio(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById('preview').src = e.target.result;
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
</body>
</html>
三、预览本地视频
<!DOCTYPE html>
<html>
<body>
<input type="file" accept="video/*" onchange="previewVideo(this)">
<video id="preview" controls>
您的浏览器不支持 video 元素。
</video>
<script>
function previewVideo(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById('preview').src = e.target.result;
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
</body>
</html>