zoukankan      html  css  js  c++  java

  • bootstrap fileinput插件使用感悟

    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.                 <p 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了，真是太坑了
  • 相关阅读:
    fastjson基本使用 (待继续完善)【原】
    webkit内核浏览器的CSS写法
    sencha touch pull-refresh-panel 面板下拉刷新
    一个非常棒的星星评分插件
    JavaScript字符转Unicode,顺便说句：GitHub的Oh no页面很亮
    Git版本控制软件结合GitHub从入门到精通常用命令学习手册
    手把手教你如何加入到github的开源世界！
    前端面试题：高效地随机选取数组中的元素
    CSS3 动画animation
    CSS3 Transform
  • 原文地址：https://www.cnblogs.com/kenshinobiy/p/7783146.html
Copyright © 2011-2022 走看看