input type="file"时的样式修改以及图片预览

最新推荐文章于 2021-08-19 00:48:36 发布

原创最新推荐文章于 2021-08-19 00:48:36 发布 · 435 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#input file修改样式 #file图片预览

html 专栏收录该内容

0 篇文章

订阅专栏

本文介绍了一种在前端实现图片上传并实时预览的方法，使用HTML、CSS和JavaScript技术，通过隐藏文件输入框和利用FileReader API实现图片即时显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前公司的垃圾前端连这个都不会弄，直接自己动手，直接上代码

html

<div class="head-img">
    <img src="照相机.png" id="my-img" style="width: 200px;height: 200px">
    <input type="file" id="img-upload" accept="image/*" />
</div>

css

    .head-img {
        text-align: center;
        position: relative;
    }

    #img-upload {
        opacity: 0;
        width: 200px;
        height: 200px;
        position: absolute;
        top: 0;
        left: 50%;
        margin-left: -100px;
    }

$(document).ready(function() {
    $(document).on('change', "#img-upload", function(event) {
        var _file = $(this);
        var _fileObj = _file[0];
        var windowURL = window.URL || window.webkitURL;
        var dataURL = windowURL.createObjectURL(_fileObj.files[0]);
        $(document).find('#my-img').attr('src', dataURL);
    });
});