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了，真是太坑了
  • 相关阅读:
    Key-Value Memory Network
    Deep Mask Memory Network with Semantic Dependency and Context Moment for Aspect Level Sentiment Clas
    Deep Memory Network在Aspect Based Sentiment方向上的应用
    Deep Memory Network 深度记忆网络
    Self Attention 自注意力机制
    Attention基本公式及其变种
    *端策略优化算法(PPO)
    Policy Gradient 算法
    一本通 农场派对
    A
  • 原文地址：https://www.cnblogs.com/kenshinobiy/p/7783146.html
Copyright © 2011-2022 走看看