当前位置：首页 > article >正文

图片上传实现图片预览的功能

article 2025/1/30 20:14:25

文章目录

图片上传实现图片预览的功能
- 一、引言
- 二、拖拽上传实现预览
- - 1、HTML结构与样式
  - 2、JavaScript实现拖拽逻辑
- 三、选择文件上传实现预览
- - 1、HTML结构
  - 2、JavaScript实现预览逻辑
- 四、使用示例
- 五、总结

图片上传实现图片预览的功能

在这里插入图片描述

一、引言

在现代网页设计中，图片预览功能是提升用户体验的重要元素之一。它允许用户在上传图片之前就能看到图片的效果，从而减少不必要的上传操作，提高效率。本文将介绍如何实现图片上传后的即时预览功能，包括拖拽上传和选择文件上传两种方式。

二、拖拽上传实现预览

1、HTML结构与样式

首先，我们需要创建一个拖拽区域，并为其设置一些基本的样式，以便用户能够清楚地看到拖拽区域。

HTML复制

<div id="drag"><img src="#" alt="拖拽图片到此预览"></img></div>
<style>
#drag {
    border:1px dashed gray;
    border-radius:5px;
    box-sizing:border-box;
    padding: 1em;
}
#drag img {
    border:1px dashed red;
}
</style>

2、JavaScript实现拖拽逻辑

接下来，我们需要通过JavaScript来处理拖拽事件，实现图片的预览功能。

JavaScript复制

<script>
let $ = document.getElementById('drag')
$.ondragenter = e => { e.target.style.borderWidth = '3px' },
$.ondragover = e => { e.preventDefault() },
$.ondragleave = e => { e.target.style.borderWidth = '1px' },
$.ondrop = e => {
    e.preventDefault()
    let div = e.target
    div.style.borderWidth = '1px'
    for (let item of e.dataTransfer.items) {
        let f = item.getAsFile()

        let r = new FileReader()
        r.onload = e => {
            div.querySelector('img').src = e.target.result
        }
        r.readAsDataURL(f)
        break
    }
}
</script>

三、选择文件上传实现预览

1、HTML结构

为了实现选择文件上传的预览功能，我们需要一个文件输入框和一个按钮来触发文件选择。

HTML复制

<button onclick="document.getElementById('img-s').click()">选择并预览图片</button>
<input hidden id="img-s" type="file"
    onchange="preview()"
    accept="image/png,image/jpeg,image/gif,image/webp">
<img src="#" alt="尚未选择预览图片"></img>

2、JavaScript实现预览逻辑

通过FileReader对象的readAsDataURL()方法，我们可以将选中的文件转换为DataURL，然后将其设置为图片的src属性，从而实现预览。

JavaScript复制

<script>
function preview(e) {
    let f = document.getElementById('img-s').files[0]
    let r = new FileReader()
    r.onload = e => {
        document.querySelector('img').src = e.target.result
    }
    r.readAsDataURL(f)
}
</script>