由于工作需要使用Bootstrap的FileInput插件，在此分享下插件的使用方法
直接上代码
fileinput.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/bootstrap.min.css" /> <link rel="stylesheet" href="css/fileinput.css" /> </head> <body> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <script type="text/javascript" src="js/fileinput.js" ></script> <script type="text/javascript" src="js/fileinput_locale_zh.js" ></script> <label class="control-label">Select File</label> <input id="input-2" name="input2" type="file" class="file-loading"> <script type="text/javascript"> var ctrlName = ‘input-2‘; var control = $(‘#‘ + ctrlName); control.fileinput({ uploadUrl:‘http://localhost:8080/upload.php‘, showCaption: false, showCancel:false, showUploadedThumbs:false, showClose:false, autoReplace:true, maxFileCount:1, overwriteInitial:true, showUploadedThumbs:false, language:‘zh‘, initialPreview:"<img src=‘/back_t.jpg‘ class=‘file-preview-image‘ />", initialPreviewCount:1, initialPreviewShowDelete:false, layoutTemplates:{ actions: ‘<div class="file-actions">\n‘ + ‘ <div class="file-footer-buttons">\n‘ + ‘ </div>\n‘ + ‘ <div class="file-upload-indicator" tabindex="-1" title="{indicatorTitle}">{indicator}</div>\n‘ + ‘ <div class="clearfix"></div>\n‘ + ‘</div>‘ } }).on(‘fileuploaded‘, function(event, data, previewId, index){ console.log(data.response.message); }); </script> </body> </html>
uploadFile.php
<?php if ($_FILES[‘input2‘]["type"] == "image/png") { echo "{\"code\":0, \"message\":\"upload success!\"}"; } else { echo "{\"code\":-1, \"error\":\"Invalid file format\"}"; } ?>
使用截图
上传成功
原文：http://www.cnblogs.com/woaitech/p/5184572.html