Single button uploader (stylized input)

by microbians

HTML

<input multiple type="file" id="file" data-content="Select files" class="custom-file-input"/>
<div id="respuesta"></div>

CSS

.custom-file-input {
  visibility: hidden;
  width: 0;
  position: relative;
}
.custom-file-input-added::before {
    content: 'Added some files' !important;
}
.custom-file-input::before {
  content: attr(data-content);
  display: inline-block;
  background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
  border: 1px solid #999;
  border-radius: 3px;
  padding: 5px 8px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  text-shadow: 1px 1px #fff;
  font-weight: 700;
  font-size: 10pt;
  visibility: visible;
  position: absolute;
}
.custom-file-input:hover::before {
  border-color: black;
}
.custom-file-input:active::before {
  background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}

JavaScript

$("#file").live("change",function(){
    var count = 0;
    for ( i = 0; i < this.files.length; i++ ) {
        var tmpObj = this.files[i];
        if ( tmpObj.name !== undefined ) {
            count++;
        }
    }

    var respuesta = count + " file" + (count==1?"":"s") + " parsed";
    $("#file").attr("data-content",respuesta);
});