input自定义文件上传样式

自己最近有个需求是需要用到input的文件上传的，但是原生的input框太丑了，而且框架的也达不到需求，所以努力了一段时间，结合网上各种例子，终于做出来了一个感觉还不错的文件上传的input框，特地分享出来.

首先来看看默认的，是真的丑啊

接下来是我改良的

虽然自己做的是上传图片的，但是并没有什么影响，具体效果就是点击上传按钮后文件名会显示到左边的input输入框里，接下来放代码

HTML

<div class="form-item">
     <label for="applyLicense"> <span>*</span> 营业执照</label>
     <input readonly style="width: 268px" id="applyLicense" type="text" placeholder="请上传营业执照" autocomplete="off">
     <input id="fileInput" type="file" name="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">
     <label for="fileInput" class="file-btn">上传</label>
</div>

先讲解这块代码的意思吧。第一个label是用来放名称的，可以略过，第二个label是用来触发文件上传的，在这个label上写样式，然后把原生的给覆盖掉，给一个for属性就能做到点击label就选择文件。第一个input是用来放选中的文件名称的，会显示完整的路径，需要配合js；readonly只读属性，不允许用户更改，autocomplete=“off”，属性规定输入字段是否应该启用自动完成功能。最后就是accept，我设置了只允许选择图片为（image/gif,image/jpeg,image/jpg,image/png,image/svg）结尾的文件，如果不是要求上传图片可以把这行删掉。

CSS

.form-item {
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #333333;
    margin-bottom: 20px;
}

.form-item label {
    width: 126px;
    text-align: right;
}

.form-item span {
    color: #FF3228;
}

.form-item input {
    width: 400px;
    height: 40px;
    line-height: 40px;
    border: 1px solid #cccccc;
    padding-left: 14px;
    box-sizing: border-box;
    margin-left: 18px;
}

/* 这是原生的input框，给他透明隐藏，然后定位让文件上传的按钮覆盖它 */
#fileInput {
    width: 120px;
    margin-left: 8px;
    filter: Alpha(opacity=0);
    -moz-opacity:0;
    opacity: 0;
    position: absolute;
    right: 37px;
    z-index: 2;
}
/* 这是主要的，文件上传按钮的样式 */
.file-btn {
    width:120px;
    height:40px;
    background:rgba(230,242,255,1);
    border:1px solid rgba(167,210,255,1);
    border-radius:2px;
    text-align: center !important;
    line-height: 40px;
    color: #333333;
    position: relative;
    top: 0;
    left: 0;
    margin-left: 8px;
}
/* 单行文字截断，展示文件名的input框用的 */
#applyLicense {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

JS

//这里本人用的是jq，大致意思就是：监听文件上传的内容，如果内容改变了，就把它的内容放到用来展示的input里。
changeImg();
function changeImg(){
    $("#fileInput").change(function(){
        $("#applyLicense").val($("#fileInput").val());
    })
}

到此为止这次分享的内容就结束了，本人也是自学的前端现在在实习，技术有限可能会有不足的地方希望大神能指点，最后希望能看到本篇文章的前端小伙伴早日成为巨佬，共勉！