自定义上传图片样式，同时实现多图片的上传和预览

最新推荐文章于 2021-02-27 04:56:54 发布

anran_1211

最新推荐文章于 2021-02-27 04:56:54 发布

阅读量1k

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/anran_1211/article/details/78895538

版权

该博客介绍如何创建一个HTML表单，实现自定义样式的选择文件按钮，支持多图片上传，并通过JavaScript实时预览上传的图片。通过设置CSS样式，调整了文件输入框的外观，使用`onchange`事件触发图片预览，利用`window.URL.createObjectURL()`创建文件URL显示在页面上。

摘要由CSDN通过智能技术生成

<form action="" name="formx" method="post" enctype="multipart/form-data
    ">
        <span>选择文件</span>
        <input type="file" name="file" multiple="multiple" οnchange="setImagePreviews();" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">
        <ul id="list"></ul>
    </form>

* {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    body {
        position: relative;
    }
    span {
        display: inline-block;
        width : 90px;
        height: 35px;
        line-height: 35px;
        border: 1px solid #ccc;
        border-radius: 5px;
        text-align: center;
    }
    input[type="file"] {
        width: 100px;
        height: 40px;
        position: absolute;
        top: 0; 
        le