BootStrap file upload style is super nice [continuously updated]_javascript skills

1. use bootstrap directly and use simple js control

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

very simple, the code is as follows:

 
  browse 
 

the effect is as follows:

no other js or css is required, just introducebootstrap and jquery

in fact, this is spliced together, and then js controls the display of the file name.

the effect is as follows:

two bootstrap-filestyle

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

note: this style can only use bootstrap2 css. the css version of bootstrap3 is incompatible! ! (damn it, i’ve been testing for a long time just because of this.. fuck

the effect is as follows:

three bootstrap-file-input

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

         
    
 
  
 
  
 
  
 
 
 
 
 disable the styling:     

introducedbootstrap.file-input.jsbut there is a slight problem with the direct introduction, saying thatbootstrapfileinput cannot be foundthis method. so i changed a little js:

/* bootstrap - file input ====================== this is meant to convert all file input tags into a set of elements that displays consistently in all browsers. converts all  into bootstrap buttons browse */ $.fn.bootstrapfileinput = function() { 这里我直接用这个方法，把前面一行删掉就可以了 this.each(function(i,elem){ .........中间省略 // add the styles before the first stylesheet // this ensures they can be easily overridden with developer styles var csshtml = ''; $('link[rel=stylesheet]').eq(0).before(csshtml); };

okay, it’s time to see the effect~~

four fine uploader

http://fineuploader.com/demos.html

there is a fee for downloading from the official website. . i downloaded one from github.

download link

after downloading and decompressing, it looks like this:

          
  
 
 
  Upload now 
     
    

you can find js and css by searching in the folder, but there is all.fineuploader-4.3.1.min.js, which i copied from the official website using chrome to review elements. . it can be used after testing

pay attention to the template in the intermediate code

without this paragraph, the console will report an error:

then i found a reason:

as you can read, you must have a template file before it can run.

the effect is as follows: (the picture without css is a bit ugly)

the above content is related to the bootstrap file upload style introduced by the editor. i hope it will be helpful to you!