input File 选择图片后预览

最新推荐文章于 2024-10-06 22:53:49 发布

转载最新推荐文章于 2024-10-06 22:53:49 发布 · 1.3k 阅读

JS 同时被 3 个专栏收录

72 篇文章

订阅专栏

Jquery

44 篇文章

订阅专栏

css

37 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现文件上传实时预览的方法。通过简单的代码示例，展示了如何在用户选择文件后立即显示其预览图像，增强了用户体验。此功能适用于需要用户上传图片的网站或应用。

<form action="upload.php" method="post" enctype="multipart/form-data">
    <div>
        <img src="" class="img">
    </div>

    <input type="file" class="imgInput">
</form>

<script>

    $(".imgInput").change(function(){
        $(".img").attr("src",URL.createObjectURL($(this)[0].files[0]));
    });
</script>