JS实现照片预览

简介: JS实现照片预览

以下是一个简单的JS代码示例,用于实现照片预览功能:


<!DOCTYPE html>
<html>
<head>
    <title>Photo Preview</title>
    <script>
        function previewPhoto(event) {
            var reader = new FileReader();
            reader.onload = function(){
                var preview = document.getElementById('preview');
                preview.src = reader.result;
            }
            reader.readAsDataURL(event.target.files[0]);
        }
    </script>
</head>
<body>
    <input type="file" onchange="previewPhoto(event)">
    <br>
    <img id="preview" src="" alt="Preview">
</body>
</html>


使用以上代码,当用户选择图片文件后,该图片将在页面上实现预览。

相关文章
|
存储 JavaScript 前端开发
js实现灵活下载和预览网络链接pdf文件
js实现灵活下载和预览网络链接pdf文件
951 0
pdf.js 怎么预览 base64 类型的 pdf 文件
pdf.js 怎么预览 base64 类型的 pdf 文件
539 0
pdf.js 怎么预览 base64 类型的 pdf 文件
|
9月前
|
JavaScript
js上传图片本地预览(整理)
js上传图片本地预览(整理)
|
1月前
|
JavaScript 前端开发
js的input标签上传图片并转为base64预览
js的input标签上传图片并转为base64预览
65 0
|
1月前
使用PDF.js预览文件老是报错Message: file origin does not match viewer‘s_otherError @ app.js:1140怎么办??
使用PDF.js预览文件老是报错Message: file origin does not match viewer‘s_otherError @ app.js:1140怎么办??
|
7月前
|
JavaScript 前端开发
前端js上传照片实现可预览功能
前端js上传照片实现可预览功能
36 0
|
JavaScript Java
Vue+JS+layUI 完成预览模式功能
Vue+JS+layUI 完成预览模式功能
|
JavaScript
原生 js 实现截图粘贴预览图片功能
原生 js 实现截图粘贴预览图片功能
130 0
原生 js 实现截图粘贴预览图片功能
|
缓存 前端开发 JavaScript
pdf.js预览pdf文件流(base64)
新接手一个老项目,需要改造pdf文件的预览效果,接口直接返回的pdf文件的文件流base64字符串,前端只能拿到base64来进行预览。 pdf.js是一款非常优秀的pdf解析工具,但不支持直接预览文件流,这里需要对pdf.js稍微改造。
1299 0
pdf.js预览pdf文件流(base64)