用css美化html表单的file类型input，美化上传按钮

这是很不错的css美化上传input-file的修饰，记得收藏！！！我也是找了好多才找到这么容易理解的！

html部分：

<!--样式1-->
<a href="javascript:;" class="a-upload"><input type="file" name="" id="">点击这里上传文件</a>
<!--样式2-->
<a href="javascript:;" class="file">选择文件 <input type="file" name="" id=""></a>

css样式1：

.a-upload {
    padding: 4px 10px;
    height: 20px;
    line-height: 20px;
    position: relative;
    cursor: pointer;
    color: #888;
    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    display: inline-block;
    *display: inline;
    *zoom: 1
}

.a-upload  input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer
}

.a-upload:hover {
    color: #444;
    background: #eee;
    border-color: #ccc;
    text-decoration: none
}

css样式2：

.file {
    position: relative;
    display: inline-block;
    background: #D0EEFF;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    /*padding: 4px 12px;*/
    overflow: hidden;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
    margin-left: 10px;
}
.file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
    width: 100px;
    height: 100px;
}
.file:hover {
    background: #AADFFD;
    border-color: #78C3F3;
    color: #004974;
    text-decoration: none;
}

美化后可以用js控制：

$(".a-upload").on("change","input[type='file']",function(){
    var filePath=$(this).val();
    if(filePath.indexOf("jpg")!=-1 || filePath.indexOf("png")!=-1){
        $(".fileerrorTip").html("").hide();
        var arr=filePath.split('\\');
        var fileName=arr[arr.length-1];
        $(".showFileName").html(fileName);
    }else{
        $(".showFileName").html("");
        $(".fileerrorTip").html("您未上传文件，或者您上传文件类型有误！").show();
        return false 
    }})

而我！！！要用localResizeIMG压缩上传图片，这个就特棒。

//图片压缩上传，兼容安卓、苹果、web
document.querySelector('#file').addEventListener('change', function () {

    var option = {
        width    : null,//width {Number} 图片最大不超过的宽度，默认为原图宽度，高度不设时会适应宽度。
        height   : null,//同上
        fieldName: 'file',//{String} 后端接收的字段名，默认：file*/
        quality  : 0.5,//{Number} 图片压缩质量，取值 0 - 1，默认为0.7
    }
    lrz(this.files[0],option)
        .then(function (rst) {
            // 处理成功会执行
            console.log(rst);
            $.ajax({
                url: "{:url('***********')}",
                data: rst.formData,
                dataType:'json',
                processData: false,
                contentType: false,
                type: 'POST',
                success: function (data) {
                   //data = JSON.stringify(data);
                   console.log('upload',data)
                },
                error:function (e) {
                    console.log('ajax error',e)
                }
            });

        })
        .catch(function (err) {
            console.log('upload_err',err)
            // 处理失败会执行
        })
        .always(function () {
            // 不管是成功失败，都会执行

        });
});