bootstrap fileinput插件使用感悟-阿里云开发者社区

开发者社区> suboysugar> 正文

bootstrap fileinput插件使用感悟

简介: bootstrap fileinput 的填坑感悟              这个插件在demo的网站地址http://plugins.krajee.com/file-preview-icons-demo;不得不承认这个插件很强大,作为一个文件上传插件做到了预览,而且还支持国际化,但是唯一的缺点就是api烂的到极点(应该说没有API)。
+关注继续查看
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代码如下:
[html] view plain copy
 
  1. <div class="form-group">  
  2.             <label class="col-sm-2 control-label">图片上传:</label>  
  3.             <div class="col-sm-4">  
  4.                 <input id="file" name="myfile" type="file" data-show-caption="true">  
  5.                 <class="help-block">支持jpg、jpeg、png格式,大小不超过2.0M</p>  
  6.             </div>  
  7.         </div>  


        导入后第二步要写js初始化这个插件,js代码如下:
         
[javascript] view plain copy
 
  1. function initFileInput(ctrlName,uploadUrl) {      
  2.         var control = $('#' + ctrlName);   
  3.         control.fileinput({  
  4.             language: 'zh', //设置语言  
  5.             uploadUrl: uploadUrl,  //上传地址  
  6.             showUpload: false, //是否显示上传按钮  
  7.             showRemove:true,  
  8.              dropZoneEnabled: false,  
  9.             showCaption: true,//是否显示标题  
  10.             allowedPreviewTypes: ['image'],  
  11.                 allowedFileTypes: ['image'],  
  12.                 allowedFileExtensions:  ['jpg', 'png'],  
  13.                 maxFileSize : 2000,  
  14.             maxFileCount: 1,  
  15.             //initialPreview: [   
  16.                     //预览图片的设置  
  17.               //      "<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='肖像图片'>",  
  18.             //],  
  19.               
  20.         }).on("filebatchselected", function(event, files) {  
  21.             $(this).fileinput("upload");  
  22.             })  
  23.             .on("fileuploaded", function(event, data) {  
  24.                 $("#path").attr("value",data.response);  
  25.         });  
  26.     }  
  27.       
  28.     $(function () {  
  29.         var path="${base}/admin/product/upload.htm";  
  30.         initFileInput("file",path);  
  31.           
  32.     })  
             这是异步上传的js代码,而且还是选择图片自动上传的,当然你也可以修改这个js改为显示上传按钮,点击上传按钮才上传。因为该插件的异步上传是ajax提交,后台spring就按照ajax提交获取它的提交。java代码如下:
[java] view plain copy
 
  1.       /** 
  2.  *  
  3. * 方法名: upload 
  4. * 方法作用: 文件异步上传 
  5. * 创建人:Wu Feng 
  6. * 创建时间:2016-11-9 下午10:16:36    
  7. * @param @param request 
  8. * @param @param product 
  9. * @param @return     
  10. * 返回值类型: String     
  11. * @throws 
  12.  */  
  13. @ResponseBody  
  14. @RequestMapping("/upload")  
  15. public String upload(MultipartHttpServletRequest request,Product product) {  
  16.     //存放地址  
  17.     String path=productService.upload(request);  
  18.     return path;  
  19. }  
            将文件上传后,返回文件的路径,js代码:  $("#path").attr("value",data.response);将路径返回,赋值页面隐藏的路径字段。然后点击确定把数据插入进去。
             如果是同步提交,需要设置该插件配置参数uploadAsync,因为该插件默认是异步提交,因此把它设为false就行。js代码如下:
[javascript] view plain copy
 
  1. function initFileInput(ctrlName) {      
  2.  var control = $('#' + ctrlName);   
  3.  control.fileinput({  
  4.      language: 'zh', //设置语言  
  5.      showUpload: false, //是否显示上传按钮  
  6.      showRemove:true,  
  7.       dropZoneEnabled: false,  
  8.      showCaption: true,//是否显示标题  
  9.      allowedPreviewTypes: ['image'],  
  10.         allowedFileTypes: ['image'],  
  11.         allowedFileExtensions:  ['jpg', 'png'],  
  12.         maxFileSize : 2000,  
  13.         maxFileCount: 1,  
  14.         uploadAsync: false, //同步上传  
  15.         //initialPreview: [   
  16.                 //预览图片的设置  
  17.           //      "<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='肖像图片'>",  
  18.         //],  
  19.        
  20.  })  
[javascript] view plain copy
 
  1. //初始化就调用该方法  
  2.     $(function () {  
  3.         initFileInput("file");  
  4.     })    
           java后台的代码:
      
[java] view plain copy
 
  1. /** 
  2.      *  
  3.     * 方法名: save 
  4.     * 方法作用: 产品保存 
  5.     * 创建人:Wu Feng 
  6.     * 创建时间:2016-11-9 下午07:26:08    
  7.     * @param @param request 
  8.     * @param @param news 
  9.     * @param @return     
  10.     * 返回值类型: String     
  11.     * @throws 
  12.      */  
  13.     @RequestMapping("/save")  
  14.     public String save(MultipartHttpServletRequest request,Product product) {  
  15.         //存放地址  
  16.         String path=productService.upload(request);  
  17.         product.setPath(path);  
  18.         //存入产品信息  
  19.         productService.insert(product);  
  20.           
  21.         return "redirect:/admin/product/add.htm";  
  22.     }  
            我这里采用的是同步提交,当用户选择文件后,就只有点击确定提交,而不是点击上传后,在点击确定提交,这样省去了一部操作,也是极大的方便。
            说到这里,大家觉得并没有坑,其实坑很多,比如我碰到了显示的一直都是英文,不是因为我没有导入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了,真是太坑了

如何联系我:【万里虎】www.bravetiger.cn 【QQ】3396726884 (咨询问题100元起,帮助解决问题500元起) 【博客】http://www.cnblogs.com/kenshinobiy/

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Spring Security 授权整体流程
统一鉴权安全框架Security的授权分析
11 0
Spring MVC Controller 接收ajax的数组参数说明
Spring MVC Controller 接收ajax的数组参数说明
11 0
Java生成随机字符串与md5加密
Java生成随机字符串与md5加密
6 0
SpringBoot通过dubbo-spring-boot-starter整合Dubbo出现的问题
SpringBoot通过dubbo-spring-boot-starter整合Dubbo出现的问题
12 0
js == 和 ===
js == 和 ===
4 0
关于HTTP你需要知道的基础知识
作为一个 web 开发,HTTP 几乎是天天要打交道的东西,但我发现大部分人对 HTTP 只是浅尝辄止,对更多的细节及原理就了解不深了,在面试的时候感觉非常吃力。这篇文章就是为了帮助大家树立完整的 HTTP 知识体系,并达到一定的深度,从容地应对各种灵魂之问,也同时提升自己作为一个 web 开发的专业素养吧
6 0
关于HTTP你需要知道的基础知识
作为一个 web 开发,HTTP 几乎是天天要打交道的东西,但我发现大部分人对 HTTP 只是浅尝辄止,对更多的细节及原理就了解不深了,在面试的时候感觉非常吃力。这篇文章就是为了帮助大家树立完整的 HTTP 知识体系,并达到一定的深度,从容地应对各种灵魂之问,也同时提升自己作为一个 web 开发的专业素养吧
9 0
阿里云自然语言处理--文本纠错(中文)Java 调用示例
自然语言处理(Natural Language Processing,简称NLP),是为各类企业及开发者提供的用于文本分析及挖掘的核心工具,旨在帮助用户高效的处理文本,已经广泛应用在电商、文娱、司法、公安、金融、医疗、电力等行业客户的多项业务中,取得了良好的效果。文本纠错产品是基于海量大数据研发,为有文本纠错需求的产品提供服务。能够准确识别输入文本中出现的拼写错别字及其段落位置信息,并针对性给出正确的建议文本内容。本文将使用Java CommonSDK演示文本纠错(中文)服务的快速调用以供参考。
12 0
静态变量和Session
静态变量和Session
5 0
【高并发】为何高并发系统中都要使用消息队列?这次彻底懂了!
很多高并发系统中都会使用到消息队列中间件,那么,问题来了,为什么在高并发系统中都会使用到消息队列中间件呢?立志成为资深架构师的你思考过这个问题吗?
13 0
+关注
suboysugar
目前为自由职业者,从事BA业务分析和互联网产品设计等工作,本人先后在中关村在线、中国工商银行和神州数码工作。拥有互联网,移动互联网,软件公司等开发经历。计算机本科毕业,8年互联网和软件行业经验。
710
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载