JS implementation file Upload form field beautification special effects _javascript skills

A very stylish effect of the File Upload form field landscaping effects, the following gives a brief tutorial.

First, a few effects full enjoy:

How to use
The methods used to beautify these file upload domains are to hide the native <input type= "file" > elements, and then use a <label> element to make the beautification effect.
HTML Structure

The file uploads the domain beautification effect the most basic HTML structure as follows:

<input type= "File" name= "file" id= "file" class= "Inputfile"/> <label the for=
"file" >choose a file</ Label>   

CSS Styles

First you need to hide <input> elements. You cannot use Display:none or Visibility:hidden to hide it, because the value in the,<input> element will not be uploaded to the server side, and the <input> element will not be found when you press the TAB key. The hidden methods are as follows:

. inputfile {
 width:0.1px;
 height:0.1px;
 opacity:0;
 Overflow:hidden;
 Position:absolute;
 Z-index:-1;
}        

Next, set the style for the <label> element. Here you will use the <label> element as a style for a button.

. 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 is over the label, you need to display the cursor as a small hand shape.

. Inputfile + Label {
 cursor:pointer/* "Hand" cursor * *
}        
 

To create an effect that you can use with keyboard navigation, you need to add the following code.

. Inputfile:focus + Label {
 outline:1px dotted #000;
 Outline:-webkit-focus-ring-color auto 5px;
}       

-webkit-focus-ring-color Auto 5px can get the default border appearance in Chrome,opera and Safari browsers.

If you use a similar fastclick (a tool library that eliminates the 300-millisecond tap-pause on a mobile touch device) and you need to add some text labels, the buttons will not work properly unless the pointer-events:none is set.

<label for= "File" ><strong>choose a file</strong></label>        
. Inputfile + label * {
 Pointer-events:none;
}

Javascript

The last thing to do is to identify which files the user has chosen. The native file upload domain has this feature, but the virtual button is used here. Use JavaScript in the special effects to achieve this function.

<input type= "File" name= "file" id= "file" class= "Inputfile" data-multiple-caption= "{count} Files selected" multiple/ >        
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;});
        

Browser disables processing of javascript

If the browser disables JavaScript, then only the native files are used to upload the domain components. What we need to do is add a. No-js class to the

.
 

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 JS to achieve File Upload form field landscaping effects, I hope to help you learn.