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:
<input id="lefile" type="file" style="display:none"> <div> <input id="photoCover" type="text" style="height:30px;"> <a onclick="$('input[id=lefile]').click();">Browse</a> </div> <script type="text/javascript"> $('input[id=lefile]').change(function() { $('#photoCover').val($(this).val()); }); </script>The effects are as follows:
No other js and css is needed, just introduce bootstrap and jQuery
In fact, this is spliced out, and then js controls the display of the file name.
The effects are as follows:
Two bootstrap-filestyle
http://markusslima.github.io/bootstrap-filestyle/
Note: This style can only use the css of bootstrap2, and the css version of bootstrap3 is incompatible! ! (Damn it, I've been testing this for a long time..
The effects are as follows:
Three bootstrap-file-input
http://www.gregpike.net/demos/bootstrap-file-input/demo.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>bootstrap.file-input</title> <link href="css/bootstrap.min.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-2.0.3.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> src="js/bootstrap.file-input.js"></script> </head> <body> <!-- Change the wording using a title tag --> <input type="file"> <br> <br> <input type="file"> <br> <br> <br> <input type="file"> <br> <br> <br> <input type="file"> <br> <br> <br> <br> <br> <br> <br> Disable the styling: <!-- Disable the styling --> <input type="file" data-bfi-disabled> <script type="text/javascript"> $('input[type=file]').bootstrapFileInput(); </script> </body> </html>Bootstrap.file-input.js was introduced, but there was a little problem directly introducing it, saying that the bootstrapFileInput method cannot be found. 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 <input type="file"> into Bootstrap buttons <a>Browse</a> */ $.fn.bootstrapFileInput = function() { Here I use this method directly and delete the previous line this.each(function(i,elem){ .........Omitted in the middle // 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); };OK, it's time to see the effect~~
Four Fine Uploaders
http://fineuploader.com/demos.html
Downloading on the official website is a fee. . I downloaded one on github.
Download link
After downloading and decompressing, it looks like this:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>bootstrap.file-input</title> <link href="css/bootstrap.min.css" rel="stylesheet" /> <link href="css/fineuploader.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-2.0.3.min.js"></script> <script type="text/javascript" src="js/all.fineuploader-4.3.1.min.js"></script> </head> <body> <br> <div id="manual-fine-uploader"></div> <div id="triggerUpload" style="margin-top: 10px;"> <i></i> Upload now </div> <script> $(document).ready(function() { var manualuploader = $('#manual-fine-uploader').fineUploader({ request: { endpoint: 'server/handleUploads' }, autoUpload: false, text: { uploadButton: '<i></i> Select Files' } }); $('#triggerUpload').click(function() { manualuploader.fineUploader('uploadStoredFiles'); }); }); </script> <script> $(document).ready(function () { $('#fine-uploader').fineUploader({ request: { endpoint: 'server/handleUploads' } }); }); </script> <!-- Fine Uploader CSS ========================================================================== --> <!-- Fine Uploader DOM Element ===================================================================================================================================================================================================================================================================================================================================================================================================================================== ============================================================================================================== --> <script type="text/template" id="qq-template"> <div> <div qq-hide-dropzone> <span>Drop files here to upload</span> </div> <div> <div>Upload a file</div> </div> <span> <span>Processing dropped files...</span> <span></span> </span> <ul> <li> <div> <div></div> </div> <span></span> <span></span> <span></span> <input tabindex="0" type="text"> <span></span> <a href="#">Cancel</a> <a href="#">Retry</a> <a href="#">Delete</a> <span></span> </li> </ul> </div> </script> </body> </html>js and css, you can find it by searching in the folder, but there is an all.fineuploader-4.3.1.min.js, which I copied on the official website using chrome to review elements. . It can be used after testing
Pay attention to the Template in the intermediate code
If this section is not available, the console will report an error:
Then I found a reason:
You can read it, that is, there must be a template file to run.
The effect is as follows: (The picture corresponding to CSS is a bit ugly)
The above content is related to the BootStrap file upload style introduced to you by the editor. I hope it will be helpful to everyone!