File upload Download Style---bootstrap

In peacetime work, the file upload download function is an indispensable part. Bootstrap front-end style frames are also used more, and now customize the style of a file download based on Bootstrap's powerful style template.

Follow up with the Spring MVC framework to implement all the code for file uploads.

Take a look at the picture example: this example includes downloading the sample file style and uploading the file style.

Go directly to the code and finally explain:

<Divclass= "Form-group col-md-12 has-feedback"ID= "File">              <label for=""class= "Control-label col-md-4">Select File:</label>              <Divclass= "Col-md-4 input-group">                <inputID= "Lefile"type= "File"style= "Display:none">                <spanclass= "Input-group-addon"onclick= "$ (' input[id=lefile] ')." Click (); "style= "Cursor:pointer; Background-color: #e7e7e7"><Iclass= "fa Fa-folder-open"></I>Browse</span>                <inputID= "Photocover"class= "Form-control"type= "text">                <spanclass= "fa fa-download form-control-feedback"style= "Cursor:pointer;pointer-events:auto;"></span>              </Div>            </Div>

--------------------------------------------------------------------------------------------------------

The main technologies involved are: Bootstrap, CSS3 pointer-events, HTML5

1. HTML5 basic File Upload style

<type= "file"  name= "file">

Styles show different effects based on different browsers.

2. Font icon

You can use the bootstrap built-in glyphicons font icon, or you can use the Font awesome fonts icon. Specific use of the tutorial reference website:

glyphicons:http://v3.bootcss.com/components/#glyphicons

Font awesome:http://fontawesome.io/

In this example, two icons are used, <i class= "fa fa-folder-open" ><i class= "fa fa-download" >

or <i class= "glyphicons glyphicons-folder-open" ><i class= "Glyphicons Glyphicons-download-alt" >

3. css3:pointer-events

In Bootstrap, the. Form-control-feedback pointer-events is set to none, causing the element to be selected when the download Swatch button is clicked, and is now set to auto.

Grammar:

pointer-events: Auto | none | visiblepainted | Visiblefill | Visiblestroke | Visible | Painted | Fill | Stroke | All

default value : Auto

applies to : all elements

inheritance : There are

Animation : No

Calculated value : Specify a value

Value:

Auto: Behaves the same as when the Pointer-events property is not specified. Same as value on SVG content visiblepainted

None: The element will never be the target of a mouse event. However, when the Pointer-events property of its descendant element specifies a different value, the mouse event can point to the descendant element, in which case the mouse event will trigger the parent element's event listener in the capture or bubbling order.

Other values can only be applied to SVG.

4. Upload the file button implementation-----Bootstrap combo box Use

Use of the. Input-group and. Input-group-addon.

Specific CSS rendering self-view bootstrap source code.

5. Download the sample button implementation---Reference bootstrap form error hint style

Use of the. Has-feedback and. Form-control-feedback

File upload Download Style---bootstrap