麻烦把文件上传一下

很多人在实际的开发中都会用到input type=file的这个标签，然后就会开始吐槽，我的天，长这个样怎么处理合适，今天给大家带来一个原生改写样式的方法，希望能给大家带来帮助

不带任何改变的效果

这个原生真心丑

尝试改变后的效果

简单变样之后

实现思路

先讲讲思路是如何，第一个就是用label标签，将for指向上传的type=file的input标签，并且将input标签给隐藏。

<!--multiple的属性是可以支持多个内容一块上传-->
<input id="file" type="file" multiple>
<!--铜鼓label的指向，就可以用label替换input并且能够有实现上传功能-->
<label for="file">请选择文件</label>

完整代码


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
    <title>美化控件 & 获取上传文件的基本信息</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    
    h1 {
        font-size: 2em;
        font-weight: bolder;
        color: red;
        text-align: center;
    }
    
    fieldset {
        width: 80%;
        margin: 30px auto;
        padding: 20px;
    }
    
    fieldset legend {
        color: blue;
        font-size: 1.3em;
        font-weight: bold;
    }
    
    fieldset ul {
        margin-left: 30px;
    }
    
    fieldset li {
        line-height: 1.8;
        color: #666;
    }
    
    .container {
        width: 500px;
        height: 300px;
        margin: 20px auto;
        padding: 10px;
        border: 1px solid #888;
        overflow: auto;
    }
    
    input[type=file] {
        width: 0.1px;
        height: 0.1px;
        opacity: 0;
        overflow: hidden;
        position: absolute;
        z-index: -1;
    }
    
    label[for=file] {
        display: block;
        width: 150px;
        height: 40px;
        margin: auto;
        line-height: 40px;
        text-align: center;
        border-radius: 5px;
        font-size: 1.25em;
        font-weight: 700;
        color: white;
        background-color: #888;
        transition: 0.5s;
    }
    
    label[for=file]:hover {
        background-color: #666;
        cursor: pointer;
    }
    
    pre {
        font-size: 14px;
        line-height: 1.4;
        color: #333;
        margin-top: 20px;
    }
    </style>
</head>

<body>
    <h1>简单的美化这个控件</h1>
    <fieldset>
        <legend>美化上传文件表单控件</legend>
        <ul>
            <li>为控件绑定 label 标签</li>
            <li>隐藏这个丑陋的控件</li>
            <li>美化绑定的 label 标签</li>
        </ul>
    </fieldset>
    <fieldset>
        <legend>获取上传文件的基本信息</legend>
        <ul>
            <li>HTML5，为 input 添加 multiple 特性，允许上传多个文件</li>
            <li>绑定 input 的 change 事件，动态更改文件信息</li>
            <li>获取 FileList，HTMLInputElement.files</li>
            <li>动态写入文件信息（File 对象）</li>
        </ul>
    </fieldset>
    
    <div class="container">
        <div class="upload-file">
            <input id="file" type="file" multiple>
            <label for="file">请选择文件</label>
            <div class="file-info"></div>
        </div>
    </div>
    <script>
    let file = document.getElementById('file');
    let fileInfo = document.getElementsByClassName('file-info')[0];
    file.onchange = function() {
  //.files是type-file的内置对象
        let fileNum = file.files.length;
        file.nextElementSibling.innerHTML = `选中 ${fileNum} 个文件`;

        showFileInfo(fileNum);
    };

    function showFileInfo(num) {
        let filelist = file.files;
        let div = document.createElement('div');

        for (let i = 0; i < num; i++) {
//pre就是可以保留计算机字符，不被解析
            let pre = document.createElement('pre');
            let item = filelist.item(i);
//字符串模板，类似于和拼接字符串相同效果，是es6的写法
            pre.innerHTML = `文件名：${item.name}\n文件大小：${item.size}（字节）\n文件类型：${item.type}\n文件最后修改日期：${(new Date(item.lastModified).toLocaleString())}\n`;
            div.appendChild(pre);
        }

        fileInfo.innerHTML = '';
        fileInfo.appendChild(div);
    }
    </script>
</body>

</html>

麻烦把文件上传一下

实现思路

完整代码

推荐阅读更多精彩内容