bootstrap fileinput 的填坑感悟
这个插件在demo的网站地址http://plugins.krajee.com/file-preview-icons-demo；不得不承认这个插件很强大，作为一个文件上传插件做到了预览，而且还支持国际化，但是唯一的缺点就是api烂的到极点（应该说没有API）。
即使没有API，也不能阻挡我使用的热情，即时前方再多的坑也被我一一填满。希望我这篇文章对于初学者有点帮助。废话不多说，开始填坑之旅。
第一步开始知道需要应用的文件：
css：<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<link href="${base}/style/admin/css/fileinput.min.css" rel="stylesheet" />
<link href="${base}/style/admin/css/fileinput.min.css" rel="stylesheet" />
js: <script type="text/javascript" src="${base}/plugin/umeditor1_2_2/third-party/jquery.min.js"></script>
<script type="text/javascript" src="${base}/style/admin/js/fileinput.min.js"></script>
<script type="text/javascript" src="${base}/style/admin/js/fileinput_locale_zh.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${base}/style/admin/js/fileinput.min.js"></script>
<script type="text/javascript" src="${base}/style/admin/js/fileinput_locale_zh.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
简单说明下css文件需要Bootstrap的css文件和该插件的css文件，js文件里导入fileinput_locale_zh.js，是为了支持中文，如果你的网站是支持国际化的，那还需要导入各国的js（这些都可以在这个插件的官方下载到，常见的国家都有）,jsp代码如下：
- <div class="form-group">
- <label class="col-sm-2 control-label">图片上传:</label>
- <div class="col-sm-4">
- <input id="file" name="myfile" type="file" data-show-caption="true">
- <p class="help-block">支持jpg、jpeg、png格式，大小不超过2.0M</p>
- </div>
- </div>
导入后第二步要写js初始化这个插件，js代码如下：
- function initFileInput(ctrlName,uploadUrl) {
- var control = $('#' + ctrlName);
- control.fileinput({
- language: 'zh', //设置语言
- uploadUrl: uploadUrl, //上传地址
- showUpload: false, //是否显示上传按钮
- showRemove:true,
- dropZoneEnabled: false,
- showCaption: true,//是否显示标题
- allowedPreviewTypes: ['image'],
- allowedFileTypes: ['image'],
- allowedFileExtensions: ['jpg', 'png'],
- maxFileSize : 2000,
- maxFileCount: 1,
- //initialPreview: [
- //预览图片的设置
- // "<img src='http://127.0.0.1:8080/NewsManageSys/plugin/umeditor1_2_2/jsp/upload/20161030/55061 477813913474.jpg' class='file-preview-image' alt='肖像图片' title='肖像图片'>",
- //],
- }).on("filebatchselected", function(event, files) {
- $(this).fileinput("upload");
- })
- .on("fileuploaded", function(event, data) {
- $("#path").attr("value",data.response);
- });
- }
- $(function () {
- var path="${base}/admin/product/upload.htm";
- initFileInput("file",path);
- })
- /**
- *
- * 方法名: upload
- * 方法作用: 文件异步上传
- * 创建人：Wu Feng
- * 创建时间：2016-11-9 下午10:16:36
- * @param @param request
- * @param @param product
- * @param @return
- * 返回值类型： String
- * @throws
- */
- @ResponseBody
- @RequestMapping("/upload")
- public String upload(MultipartHttpServletRequest request,Product product) {
- //存放地址
- String path=productService.upload(request);
- return path;
- }
如果是同步提交，需要设置该插件配置参数uploadAsync，因为该插件默认是异步提交，因此把它设为false就行。js代码如下：
- function initFileInput(ctrlName) {
- var control = $('#' + ctrlName);
- control.fileinput({
- language: 'zh', //设置语言
- showUpload: false, //是否显示上传按钮
- showRemove:true,
- dropZoneEnabled: false,
- showCaption: true,//是否显示标题
- allowedPreviewTypes: ['image'],
- allowedFileTypes: ['image'],
- allowedFileExtensions: ['jpg', 'png'],
- maxFileSize : 2000,
- maxFileCount: 1,
- uploadAsync: false, //同步上传
- //initialPreview: [
- //预览图片的设置
- // "<img src='http://127.0.0.1:8080/NewsManageSys/plugin/umeditor1_2_2/jsp/upload/20161030/55061 477813913474.jpg' class='file-preview-image' alt='肖像图片' title='肖像图片'>",
- //],
- })
- //初始化就调用该方法
- $(function () {
- initFileInput("file");
- })
- /**
- *
- * 方法名: save
- * 方法作用: 产品保存
- * 创建人：Wu Feng
- * 创建时间：2016-11-9 下午07:26:08
- * @param @param request
- * @param @param news
- * @param @return
- * 返回值类型： String
- * @throws
- */
- @RequestMapping("/save")
- public String save(MultipartHttpServletRequest request,Product product) {
- //存放地址
- String path=productService.upload(request);
- product.setPath(path);
- //存入产品信息
- productService.insert(product);
- return "redirect:/admin/product/add.htm";
- }
说到这里，大家觉得并没有坑，其实坑很多，比如我碰到了显示的一直都是英文，不是因为我没有导入fileinput_locale_zh.js，网上一查，原来是没有去掉class=“file”，非常感谢这个网站：
点击打开链接，第二个坑就是我不想要显示拖拽区域，因为我喜欢简单点，那样我觉得太难看了，这时候你需要知道全部的配置信息，这里感谢这位csdn好友提供了配置信息（很给力）。网站地址如下：
点击打开链接
是不是该结束了，并没有，细心你的会发现，那我们编辑产品信息的时候，需要看他上传的产品图片，这个也简单，你只要在我注释的代码里写上图片地址就行了。附上我的劳动成品：
转：http://blog.csdn.net/u012157999/article/details/53150845
bootstrap-fileinput 不显示中文问题
我引入了本地js文件，但是还是不显示中文，求教，在线等
<script src="//cdn.bootcss.com/bootstrap-fileinput/4.3.5/js/fileinput.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap-fileinput/4.3.5/js/locales/zh.min.js"></script>function initFileInput() {
var projectfileoptions = { language : 'zh' } $("#input-id").fileinput(projectfileoptions); }
解决方法：
