Bootstrap file upload style super good-looking "continuous update" _javascript tips

A direct use of bootstrap, using simple JS control

http://duckranger.com/2012/06/pretty-file-input-field-in-bootstrap/

Very simple, the code is as follows:

<input id= "Lefile" type= "file" style= "Display:none" > 
<div class= "Input-append" > 
<input id= " Photocover "class=" Input-large "type=" text "style=" height:30px; > 
<a class= "btn" onclick= "$ (' input[id=lefile]"). Click (); " >Browse</a> 
</div> 
<script type= "Text/javascript" > 
$ (' input[id=lefile] '). Change (function () { 
$ (' #photoCover '). Val ($ (this). Val ()); 
}); 

The effect is as follows:

Do not need any other JS and CSS, just to introduce bootstrap and jquery can

In fact, this is the stitching out, and then JS control display file name.

The effect is as follows:

Two Bootstrap-filestyle

http://markusslima.github.io/bootstrap-filestyle/

Note: This style can only use bootstrap2 CSS, version of BOOTSTRAP3 CSS is not compatible!! Mom, I've been testing this for a while. Fell

The effect is as follows:

Three Bootstrap-file-input

Http://www.gregpike.net/demos/bootstrap-file-input/demo.html

<! DOCTYPE html>  

The

introduces Bootstrap.file-input.js but directly introduces a little problem, saying that you cannot find the bootstrapfileinput method. So I changed it a little bit JS:

/* Bootstrap-file Input ====================== This are meant to convert all File Input tags into a set of elements T 
Hat displays consistently in all browsers. Converts all <input type= "file" > into Bootstrap buttons <a class= "BTN" >Browse</a> * * $.fn.bootstrap FileInput = function () {I'm going to use this method directly to delete the previous line This.each (function (I,elem) {...). 
Middle ellipsis//ADD the styles before the the stylesheet//This ensures they can is easily overridden with developer styles var csshtml = ' <style> ' + '. file-input-wrapper {overflow:hidden; position:relative; cursor:pointer; z-index:1; } ' + '. File-input-wrapper input[type=file],. File-input-wrapper input[type=file]:focus,. File-input-wrapper input[ type=file]:hover {position:absolute; top:0; left:0; cursor:pointer; opacity:0; Filter:alpha (opacity=0); z-index:99 ; outline:0; } ' + '. File-input-name {margin-left:8px} ' 
+ ' </style> '; 
$ (' link[rel=stylesheet] '). EQ (0). before (csshtml);  };

Well, it's time to see the effect.

Four Fine Uploader

Http://fineuploader.com/demos.html

Download at the official website is a charge. I downloaded one in GitHub.

Download link

After the download decompression is this:

<! DOCTYPE html>  

JS and CSS, you search in the folder can be found, but there is a all.fineuploader-4.3.1.min.js, is my website with the chrome review element copy down. After testing can be used

Note the template in the middle code

If you do not have this section, the console will complain:

And then I found a reason:

As you can read, you must have a template file to run.

The effect is as follows: (no guide CSS corresponding to the picture a bit ugly)

The above content is small series to introduce the bootstrap file upload style of related content, hope to help everyone!