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文件
967 0
pdf.js 怎么预览 base64 类型的 pdf 文件
pdf.js 怎么预览 base64 类型的 pdf 文件
549 0
pdf.js 怎么预览 base64 类型的 pdf 文件
|
4天前
|
JavaScript
网页CAD(JS Vue 预览dwg)如何二次开发常用的CAD编辑功能
```markdown # CAD网页编程概览 - 使用mxcad库,实现CAD操作如删除、复制、镜像、移动和旋转。 - `erase()`方法删除实体,`clone()`配合`transformBy()`用于复制和编辑。 - `mirror()`和`transformBy(setMirror)`执行镜像操作,基于参考线。 - `move()`和`transformBy(setToTranslation)`实现移动功能。 - `rotate()`和`transformBy(setToRotation)`进行旋转,支持角度输入。 ```
网页CAD(JS Vue 预览dwg)如何二次开发常用的CAD编辑功能
|
3天前
|
JavaScript
js中readAsDataURL的意思,可以用于浏览器预览图像文件或者转成base64字符串
js中readAsDataURL的意思,可以用于浏览器预览图像文件或者转成base64字符串
js中readAsDataURL的意思,可以用于浏览器预览图像文件或者转成base64字符串
|
3天前
|
前端开发 JavaScript
js 打开资源管理器(经典范例:纯前端选择并预览图片)
js 打开资源管理器(经典范例:纯前端选择并预览图片)
14 0
|
10月前
|
JavaScript
js上传图片本地预览(整理)
js上传图片本地预览(整理)
|
2月前
|
JavaScript 前端开发
js的input标签上传图片并转为base64预览
js的input标签上传图片并转为base64预览
68 0
|
2月前
使用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怎么办??
|
8月前
|
JavaScript 前端开发
前端js上传照片实现可预览功能
前端js上传照片实现可预览功能
36 0