选择本地文件上传控件 input标签

Posted 2021-01-02 xxflz

当要通过控件来选择本地文件上传的时候的一种方式

<input type="file" id="input-file"/> 注意 type类型一定要是 file 

 

当年选择文件之后，就用  this.file[0] 来获得文件的基本信息

下面为项目中的应用

      html 


     <div class="upload-button">
                <span style="position: absolute;text-align: center;width: 135px;left:0;">上传封面图片</span>
                <input type="file" id="input-file"/>
     </div>

　　js

//        获取本地图片信息
        $("#input-file").on("change", function() {
//            this.file[0] 得到文件的基本信息
            var fileName = this.files[0].name;
            var url = ‘img/‘+fileName
            // 打印原始File对象
            console.log(fileName)
            console.log(url);

打印出来的数据为

 

再要注意的就是input框的样式真的不好看啊，如需要改变样式就要加CSS，一定要把input样式定位 position:absolute ,透明度为0，再用一个span标签覆盖起来

.upload-button{
    position: relative;
    float: right;
    background: #fa4a5f;
    height: 40px;
    font-size: 19px;
    color:#fff;
    width: 135px;
    line-height: 40px;
    text-align: center;
    margin-top:25px;
    border-radius:20px;
    box-shadow:#fa4a5f 0 0 30px;
    cursor: pointer;
    overflow: hidden;
    display: inline-block;
}
#input-file{
     opacity: 0;
     position: absolute;
     cursor: pointer;
}

效果图如下