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" />

           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>

             简单说明下css文件需要Bootstrap的css文件和该插件的css文件，js文件里导入fileinput_locale_zh.js，是为了支持中文，如果你的网站是支持国际化的，那还需要导入各国的js（这些都可以在这个插件的官方下载到，常见的国家都有）,jsp代码如下：

        导入后第二步要写js初始化这个插件，js代码如下：

                       这是异步上传的js代码，而且还是选择图片自动上传的，当然你也可以修改这个js改为显示上传按钮，点击上传按钮才上传。因为该插件的异步上传是ajax提交，后台spring就按照ajax提交获取它的提交。java代码如下:

            将文件上传后，返回文件的路径，js代码：  $("#path").attr("value",data.response);将路径返回，赋值页面隐藏的路径字段。然后点击确定把数据插入进去。

             如果是同步提交，需要设置该插件配置参数uploadAsync，因为该插件默认是异步提交，因此把它设为false就行。js代码如下：

           java后台的代码：

                   我这里采用的是同步提交，当用户选择文件后，就只有点击确定提交，而不是点击上传后，在点击确定提交，这样省去了一部操作，也是极大的方便。

            说到这里，大家觉得并没有坑，其实坑很多，比如我碰到了显示的一直都是英文，不是因为我没有导入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); }

解决方法：

已经解决了，原因是我的html是写成这样<input type="file" class="file">，结果去掉这个class就OK了，真是太坑了