css input[type=file] style beautification, input upload button beautification

August 29, 2014 399797 views

Since the company will go out to play tomorrow, I will write the blog for the past two days today. Today's content is to beautify the input[type=file] style and the input upload button.

When we upload input text, the upload button that comes with HTML is ugly, how to beautify it? The same is true: input checkbox beautification, input radio beautification is a reason, the article will summarize later.

Ideas:

The idea of beautifying the input file upload button is to first set the opacity of the previous button to 0, and then wrap the outer layer with div to achieve the beautification function.

code show as below:

DOM structure:

<ahref="javascript:;"class="a-upload"><inputtype="file"name=""id="">点击这里上传文件
</a><ahref="javascript:;"class="file">选择文件
    <inputtype="file"name=""id=""></a>

CSS Style 1:

/*a  upload */.a-upload {
    padding:4px10px;
    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
}

Style 2:

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

Modified as follows:

enter image description here

Style two:

enter image description here

Note : For HTML5 input:file, you can also control the upload type, but this is HTML5, which is not supported by lower version browsers. For details, please see: HTML5 input:file upload type control http://www.haorooms. com/post/input_file_leixing

Display filename after beautification

The above beautification hides the file name displayed by default, so how to display the file name? It doesn't matter, we can use jquery to get the filename of the file.

We can write a change event

$(".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();returnfalse}})