Input[type=”file”] 显示效果美化方法

Html中input可以作为上传图片代码如下
<input type="file" name="" id="">
但是演示非常不好看,下面做一番美化处理,效果如下:

input 文件上传美化前后对比
文件上传美化前后对比

美化方法

  1. 隐藏 input 标签
  2. 使用 label 标签在input标签位置显示;
  3. 用js获取 input 中上传的文件名称,并在 lable 标签中显示

input[type=”file”] 美化之 Html

/**
* input 文件上传 Html
*
* @author 智慧宫
* @link http://lerm.net
*/            
<div class="img-upload">
    <input type="file" class="img-upload-input" id="img-upload-input">
    <label class="img-upload-label text-center p-4 position-absolute" id="img-upload-label" for="img-upload-input">
        <i class="fas fa-cloud-upload-alt fa-2x"></i>
    </label>
</div>

input[type=”file”] 美化之 CSS

使用opacity: 0; 隐藏input标签,美化lable标签;

/**
* input 文件上传 CSS
*
* @author 智慧宫
* @link http://lerm.net
*/ 
.img-upload{
    position: relative;
    display: inline-block;
    width: 100%;
    margin-bottom: 0;
    height: calc(3.5rem + 28px);
}
.img-upload-input {
    position: relative;
    z-index: 2;
    width: 100%;
    height: calc(3rem + 28px);
    margin: 0;
    opacity: 0;
}
.img-upload-label {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #f0f0f0;
    text-align: center;
    padding: 1.5rem;
}

input[type=”file”] 美化之 JS

使用JS 来获取上传文件的名称,并在 label 标签中显示上传的文件名

/**
* input 文件上传 JS
*
* @author 智慧宫
* @link http://lerm.net
*/ 
    $(".img-upload").on("change","#img-upload-input",function() {
        var filePath=$(this).val();
    
        if(filePath.indexOf("jpg")!=-1 || filePath.indexOf("png")!=-1) {
            var arr=filePath.split('\\');
            var fileName=arr[arr.length-1];
            $("#img-upload-label").html(fileName);
        }
    })

美化效果展示

input 美化效果展示
input 美化效果展示

发表评论