Javascript: special effect for Beautifying File Upload form fields _ javascript skills

This article will share with you a special effect on beautifying File Upload form fields. There are 7 different beautification File Upload domain effects, very fashionable, interested friends can refer to a very fashionable File Upload form domain beautification effect, the following is a brief tutorial.

First, let's have a few full-eyed results:

Usage
The methods used to beautify these file upload domains are to hide the nativeAnd then useElement to make the beautification effect.
HTML Structure

The most basic HTML structure for beautifying the uploaded domain is as follows:

Choose a file   

CSS style

First, you need to hideElement. Display: none or visibility: hidden cannot be used to hide it, because after this operation,The value in the element is not uploaded to the server, andThe element is not found. The hiding method is as follows:

.inputfile { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1;}        

NextSet the style of the element. Here we willCreate an element as a button style.

.inputfile + label {  font-size: 1.25em;  font-weight: 700;  color: white;  background-color: black;  display: inline-block;} .inputfile:focus + label,.inputfile + label:hover {  background-color: red;}        

When the mouse slides over the label, you need to display the cursor as a small hand shape.

.inputfile + label { cursor: pointer; /* "hand" cursor */}         

The following code is required to create a keyboard navigation effect.

.inputfile:focus + label { outline: 1px dotted #000; outline: -webkit-focus-ring-color auto 5px;}       

-Webkit-focus-ring-color auto 5px allows you to get the default border appearance in Chrome, Opera, and Safari browsers.

If you use a tool library similar to FastClick (a tool library that eliminates 300 ms of tap-pause on mobile touch devices) and you need to add some text labels, the button will not work normally, unless pointer-events: none is set.

Choose a file        .inputfile + label * { pointer-events: none;}

JavaScript

The last thing to do is to identify the files selected by the user. The native File Upload domain has this function, but the virtual button is used here. The special effect uses javascript to implement this function.

        var inputs = document.querySelectorAll( '.inputfile' );Array.prototype.forEach.call( inputs, function( input ){ var label = input.nextElementSibling,  labelVal = label.innerHTML;  input.addEventListener( 'change', function( e ) {  var fileName = '';  if( this.files && this.files.length > 1 )   fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );  else   fileName = e.target.value.split( '\\' ).pop();   if( fileName )   label.querySelector( 'span' ).innerHTML = fileName;  else   label.innerHTML = labelVal; });});        

Disable JavaScript processing in the browser

If JavaScript is disabled in the browser, only the native File Upload domain component is used. What we need to do isAdd a. no-js class to the element and use Javascript to replace it.

      
     《script》(function(e,t,n){var r=e.querySelectorAll("html")[0];r.className=r.className.replace(/(^|\s)no-js(\s|$)/,"$1js$2")})(document,window,0);《script》       

.

js .inputfile {  width: 0.1px;  height: 0.1px;  opacity: 0;  overflow: hidden;  position: absolute;  z-index: -1;} .no-js .inputfile + label {  display: none;}        

The above is the special effect for beautifying the File Upload form field in js. I hope this will be helpful for your learning.