file input 修改样式以及原生方法

1.修改上传文件 input 的样式。(利用position + opacity 属性完成)

   
        上传文件
        
    
    

        
    

button {
            width: 80px;
            height: 35px;
            display: block;
            overflow: hidden;
            border: none;
            background: #1AAD19;
            outline: none;
            box-shadow: 0px 0px 2px #147c13;
            transition: ease-out .2s;
            cursor: pointer;
            font-size: 12px;
            color: #fff;
        }
        button:active {
            background: #178f16;
            box-shadow: inset 0px 0px 20px #147c13;
        }
        button input[type="file"] {
            height: 35px;
            width: 80px;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
        }

2.原生input的一些方法

//使用的jq
    $('input').on('change',function(){

        var file = $('input').get(0).files[0];//转化为原生对象

        console.log('所选文件的路径:' + $(this).val());//所选文件的路径

        console.log('所选文件的信息:');//所选文件的信息
        console.log(file);//所选文件的信息

        console.log('文件名：' + file.name);//文件名

        console.log('文件大小：' + file.size);//文件大小

        console.log('文件大小：' + Math.ceil(file.size/1024) + 'kb');//转换为kb

        console.log('文件名：' + file.type);//文件类型

        //FileReader 对象
        //对象事件 与方法
        var fReader1 = new FileReader();//创建文件阅读对象
        var fReader2 = new FileReader();//创建文件阅读对象
        var fReader3 = new FileReader();//创建文件阅读对象

        fReader1.readAsDataURL(file);//使用返回值为base64文件地址的方法阅读文件

        fReader2.readAsBinaryString(file);//使用返回值为二进制资源的方法阅读文件

        fReader3.readAsText(file);//使用返回值为文件内容的方法阅读文件


        fReader1.onloadstart = function(){
            console.log('开始');
        };
        fReader1.onerror = function(){
            console.log('错误');
        };
        fReader1.onprogress = function(){
            console.log('正在阅读');
        };
        fReader1.onload = function(){
            console.log('成功');
            console.log(fReader1);//base64

            console.log(fReader2);
            
            console.log(fReader3);


            //通过将base64地址赋予给img，可以达到选取的图片文件显示在浏览器上
            var base64url = fReader1.result;

            $('img').attr('src',base64url);
        };
        fReader1.onloadend = function(){
            console.log('结束');//无论成功与否
        };
        fReader1.onabort= function(){
            console.log('中止');
        };
    });

结果

7.png