Home > Developer > JavaScript
BootStrap File Upload styles are superb [continuous update] and bootstrap File Upload
Using bootstrap directly and using simple js Control
Http://duckranger.com/2012/06/pretty-file-input-field-in-bootstrap/
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()); }); </script>
The effect is as follows:
Without any other js or css, you only need to introduce bootstrap and jQuery.
In fact, this is spliced, and js controls the display file name.
The effect is as follows:
Binary bootstrap-filestyle
Http://markusslima.github.io/bootstrap-filestyle/
Note: This style can only use the css of bootstrap2, And the css of version bootstrap3 is incompatible !! (Mom, I used this test for a long time .. Drop
The effect is as follows:
Three bootstrap-file-input
Http://www.gregpike.net/demos/bootstrap-file-input/demo.html
<!DOCTYPE html>Introduced bootstrap. file-input.js but directly introduced a little problem, said the bootstrapFileInput method could not be found. So I changed the 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 <input type = "file"> into Bootstrap buttons <a class = "btn"> Browse </a> */$. fn. bootstrapFileInput = function () {Here I use this method to delete the previous line. each (function (I, elem ){......... omit // Add the styles before the first stylesheet // This ensures they can be 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 );};Okay, it's time to see the results ~~
4. Fine Uploader
Http://fineuploader.com/demos.html
Download from the official website is charged .. I downloaded one from github.
Download link
Download and decompress the package as follows:
<!DOCTYPE html>Js and css, you can find them by searching in the folder, but there is an all. fineuploader-4.3.1.min.js that I copied from the official website with chrome review elements .. Tested and usable
Note that the Template in the intermediate code
If this section does not exist, the console will report an error:
Then I found a reason:
You can read that a template file must be available for running.
The effect is as follows: (the image corresponding to no css export is a bit ugly)
The above content is related to the BootStrap File Upload style introduced by the editor. I hope it will help you!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
