美化文件按钮

最新推荐文章于 2025-07-04 11:45:49 发布

原创最新推荐文章于 2025-07-04 11:45:49 发布 · 480 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #jsAPI

常见小问题解决方案专栏收录该内容

6 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>美化input中的文件按钮</title>
    <style type="text/css"></style>
</head>
<body>
<div id="imgdisplay"><img src="000/images/food2.png"></div>
<label class="btn" for="file">点击上传图片</label>
<input type="file" id="file" class="file" style="display: none;">
</body>
<script type="text/javascript">
    document.getElementById('file').onchange = function() {
        var imgFile = this.files[0];
        var fr = new FileReader();
        fr.onload = function() {
            document.getElementById('imgdisplay').getElementsByTagName('img')[0].src = fr.result;
        };
        fr.readAsDataURL(imgFile);
    };
</script>
</html>