js读取本地图片上传示例代码写法

2024-09-05 12:14:19 阅读：45 来源： 互联网

标签：

下面是一个使用 JavaScript 读取本地图片并在网页上显示的示例代码。我们将使用 <input> 元素选择图片文件，并利用 FileReader API 来读取该文件。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>本地图片上传</title>
    <style>
        #imagePreview {
            border: 1px solid black;
            margin-top: 10px;
            max-width: 400px;
            max-height: 300px;
        }
    </style>
</head>
<body>
    <h1>上传本地图片</h1>
    <input type="file" id="fileInput" accept="image/*">
    <img id="imagePreview" src="" alt="图片预览" />

    <script>
        const fileInput = document.getElementById('fileInput');
        const imagePreview = document.getElementById('imagePreview');

        fileInput.addEventListener('change', (event) => {
            const file = event.target.files[0];

            if (file) {
                const reader = new FileReader();

                reader.onload = function(e) {
                    imagePreview.src = e.target.result; // 设置预览图的 src 属性
                };

                reader.readAsDataURL(file); // 读取文件内容
            }
        });
    </script>
</body>
</html>

HTML

代码说明：

HTML 结构:
- <input type="file"> 用于选择本地图片文件。
- <img> 元素用于预览所选择的图片。
JavaScript 部分:
- 通过 change 事件监听器检测文件输入的变化。
- 获取选择的文件并使用 FileReader API 的 readAsDataURL 方法读取文件内容。
- 在 reader.onload 回调中，将读取的内容设置为 <img> 元素的 src 属性，从而在页面上显示图片。

注意事项：

accept="image/*" 属性限制文件选择器只接收图片文件。
请确保在现代浏览器中运行此代码以获得最佳兼容性。

标签：
来源：

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

js读取本地图片上传示例代码写法

代码说明：

注意事项：