bootstrap-fileupload-上传文件控件
官方github：https://github.com/kartik-v/bootstrap-fileinput
官方dome网站：http://plugins.krajee.com/file-basic-usage-demo
博客参考：http://www.cnblogs.com/wuhuacong/p/4774396.html
如何下位案例：其中bootstrap为3.3.5，jquery为2.1.1，bootstrap-fileinput为3.x
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> <link href="bootstrap-fileinput-master/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" /> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <!-- canvas-to-blob.min.js is only needed if you wish to resize images before upload. This must be loaded before fileinput.min.js --> <script src="bootstrap-fileinput-master/js/plugins/canvas-to-blob.min.js" type="text/javascript"></script> <script src="bootstrap-fileinput-master/js/fileinput.min.js"></script> <!-- bootstrap.js below is only needed if you wish to the feature of viewing details of text file preview via modal dialog --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript"></script> <!-- optionally if you need translation for your language then include locale file as mentioned below --> <script src="bootstrap-fileinput-master/js/fileinput_locale_zh.js"></script> </head> <body> <label class="control-label">Select File</label> <input id="input-1" type="file" class="file"> <label class="control-label">Select File</label> <input id="input-1a" type="file" class="file" data-show-preview="false"> <label class="control-label">Select File</label> <input id="input-2" name="input2[]" type="file" class="file" multiple data-show-upload="false" data-show-caption="true"> <label class="control-label">Readonly Input</label> <input id="input-3a" type="file" class="file" readonly="true"> <label class="control-label">Disabled Input</label> <input id="input-3b" type="file" class="file" disabled="true"> <label class="control-label">Select File</label> <input id="input-4" name="input4[]" type="file" multiple class="file-loading"> <script> $(document).on('ready', function() { $("#input-4").fileinput({showCaption: false}); }); </script> <label class="control-label">Select File</label> <input id="input-6" name="input6[]" type="file" multiple class="file-loading"> <script> $(document).on('ready', function() { $("#input-6").fileinput({ showUpload: false, maxFileCount: 10, mainClass: "input-group-lg" }); }); </script> <label class="control-label">Select File</label> <input id="input-7" name="input7[]" multiple type="file" class="file file-loading" data-allowed-file-extensions='["csv", "txt"]'> </body> </html>