BootStrap fileinput.js文件上传组件实例代码


Posted in Javascript onFebruary 20, 2017

1.首先我们下载好fileinput插件引入插件

<span style="font-size:14px;"><link type="text/css" rel="stylesheet" href="fileinput/css/fileinput.css" rel="external nofollow" /> 
<script type="text/javascript" src="fileinput/js/fileinput.js"></script> 
<script type="text/javascript" src="fileinput/js/fileinput_locale_zh.js"></script></span>

2.html设置:

<span style="font-size:14px;"><form enctype="multipart/form-data"> 
  <input id="file-file" class="file" type="file" multiple> 
</form></span>

3.初始化设置:

function initFileInput(ctrlName, uploadUrl) { 
      var control = $('#' + ctrlName); 
      control.fileinput({ 
        resizeImage : true, 
        maxImageWidth : 200, 
        maxImageHeight : 200, 
        resizePreference : 'width', 
        language : 'zh', //设置语言 
        uploadUrl : uploadUrl, 
        uploadAsync : true, 
        allowedFileExtensions : [ 'jpg', 'png', 'gif' ],//接收的文件后缀 
        showUpload : true, //是否显示上传按钮 
        showCaption : true,//是否显示标题 
        browseClass : "btn btn-primary", //按钮样式 
        previewFileIcon : "<i class='glyphicon glyphicon-king'></i>", 
        maxFileCount : 3, 
        msgFilesTooMany : "选择图片超过了最大数量", 
        maxFileSize : 2000, 
      }); 
    }; 
   //初始化控件initFileInput(id,uploadurl)控件id,与上传路径 
    initFileInput("file-file", "/tqyh/pushMessAction");

注:要想使用控件自带的upload按钮,以及上传进度,必须用form包裹
(当然也可以在初始化的时加入 enctype: 'multipart/form-data',是一样的)但不用定义action

<strong><form enctype="multipart/form-data"> 
  <input id="file-file" class="file" type="file" multiple> 
</form></strong>

最后通过后台进行正常的上传就好了。

BootStrap fileinput.js文件上传组件实例代码

BootStrap fileinput.js文件上传组件实例代码

BootStrap fileinput.js文件上传组件实例代码

有些朋友说我没写明白,好吧我把后台代码贴出:

servlet:

@Override 
ublic void doPost(HttpServletRequest request,  
       HttpServletResponse response) 
       throws ServletException, java.io.IOException { 
    String path = request.getSession().getServletContext().getRealPath("/headUpload"); 
  UploadMediaService upload=new UploadMediaService(); 
  String headimage=upload.getMeiaName(path, request); 
  request.getSession().setAttribute("headname",headimage ); 
  System.out.println("文件上传成功"); 
 } 
 @Override 
ublic void doGet(HttpServletRequest request,  
           HttpServletResponse response) 
    throws ServletException, java.io.IOException { 
  doPost( request, response); 
 }

其实后台不用可以接收,我们通过解析request就能获取一个或者多个上传的文件。上面代码主要核心代码:

<span style="font-size:14px;">String path = request.getSession().getServletContext().getRealPath("/headUpload"); 
      UploadMediaService upload=new UploadMediaService(); 
      String headimage=upload.getMeiaName(path, request);</span>
<span style="font-size:14px;">UploadMediaService : 
/** 
   * 上传媒体文件,存储在服务端 
   * 
   * @param path 获取文件需要上传到的路径  
   * @param request 客户端请求 
   * @return 
   */ 
  public static String uploadLocalMedia(String path,HttpServletRequest request){ 
    String filename ="";  
     //获得磁盘文件条目工厂  
    DiskFileItemFactory factory = new DiskFileItemFactory();  
    //如果没以下两行设置的话,上传大的 文件 会占用 很多内存,  
    //设置暂时存放的 存储室 , 这个存储室,可以和 最终存储文件 的目录不同  
    /** 
     * 原理 它是先存到 暂时存储室,然后在真正写到 对应目录的硬盘上,  
     * 按理来说 当上传一个文件时,其实是上传了两份,第一个是以 .tem 格式的  
     * 然后再将其真正写到 对应目录的硬盘上 
     */  
    factory.setRepository(new File(path));  
    //设置 缓存的大小,当上传文件的容量超过该缓存时,直接放到 暂时存储室  
    factory.setSizeThreshold(1024*1024) ;  
    //高水平的API文件上传处理  
    ServletFileUpload upload = new ServletFileUpload(factory);  
    try {  
      //可以上传多个文件  
      List<FileItem> list = upload.parseRequest(request);  
      for(FileItem item : list) {  
        //如果获取的 表单信息是普通的 文本 信息  
        if(item.isFormField()) {            
          //获取用户具体输入的字符串 ,名字起得挺好,因为表单提交过来的是 字符串类型的  
          String value = item.getString() ;  
        } else{  
          //对传入的非 简单的字符串进行处理 ,比如说二进制的 图片,视频这些  
          /** 
           * 以下三步,主要获取 上传文件的名字 
           */  
          //获取路径名  
          String value = item.getName() ;  
          //索引到最后一个反斜杠  
          int start = value.lastIndexOf("\\");  
          //截取 上传文件的 字符串名字,加1是 去掉反斜杠,  
          filename = value.substring(start+1);  
          System.out.println("filename="+ filename); 
          //真正写到磁盘上  
          //它抛出的异常 用exception 捕捉  
          //item.write( new File(path,filename) );//第三方提供的  
          //手动写的  
          OutputStream out = new FileOutputStream(new File(path,filename));  
          InputStream in = item.getInputStream() ;  
          int length = 0 ;  
          byte [] buf = new byte[1024] ;  
          // in.read(buf) 每次读到的数据存放在  buf 数组中  
          while( (length = in.read(buf) ) != -1) {  
            //在  buf 数组中 取出数据 写到 (输出流)磁盘上  
            out.write(buf, 0, length);   
          }  
          in.close();  
          out.close();  
        }  
      }  
    } catch (FileUploadException e) {  
      log.error("文件上传异常:",e); 
    } catch (Exception e) {  
      log.error("文件处理IO异常:",e); 
    }  
    return filename ; 
  } 
</span>

以上所述是小编给大家介绍的BootStrap fileinput.js文件上传组件实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript中的getTimezoneOffset()方法使用详解
Jun 10 Javascript
JavaScript禁止复制与粘贴的实现代码
May 16 Javascript
Javascript使用SWFUpload进行多文件上传
Nov 16 Javascript
Bootstrap 手风琴菜单的实现代码
Jan 20 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
Feb 15 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
Apr 19 Javascript
令按钮悬浮在(手机)页面底部的实现方法
May 02 Javascript
微信小程序使用Socket的实例
Sep 19 Javascript
Angular实现下拉框模糊查询功能示例
Jan 03 Javascript
js实现时间日期校验
May 26 Javascript
node运行js获得输出的三种方式示例详解
Jul 02 Javascript
Vuex实现简单购物车
Jan 10 Vue.js
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
Feb 20 #Javascript
分享一道关于闭包、bind和this的面试题
Feb 20 #Javascript
原生JS实现跑马灯效果
Feb 20 #Javascript
js 实现省市区三级联动菜单效果
Feb 20 #Javascript
js事件冒泡与事件捕获详解
Feb 20 #Javascript
关于ES6的六个小特性(二)
Feb 20 #Javascript
JavaScript 总结几个提高性能知识点(推荐)
Feb 20 #Javascript
You might like
解析PHP获取当前网址及域名的实现代码
2013/06/23 PHP
PHP时间戳和日期相互转换操作实例小结
2018/12/18 PHP
PHP设计模式之PHP迭代器模式讲解
2019/03/22 PHP
给moz-firefox下添加IE方法和属性
2007/04/10 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
2014/03/08 Javascript
jQuery和AngularJS的区别浅析
2015/01/29 Javascript
高性能JavaScript模板引擎实现原理详解
2015/02/05 Javascript
基于JQuery实现图片轮播效果(焦点图)
2016/02/02 Javascript
JavaScript的设计模式经典之代理模式
2016/02/24 Javascript
JS全局变量和局部变量最新解析
2016/06/24 Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
2018/01/18 Javascript
JS实现字符串中去除指定子字符串方法分析
2018/05/17 Javascript
vue导入.md文件的步骤(markdown转HTML)
2020/12/31 Vue.js
如何在vue中使用HTML 5 拖放API
2021/01/14 Vue.js
Python实现的一个自动售饮料程序代码分享
2014/08/25 Python
Python中方法链的使用方法
2016/02/23 Python
PyChar学习教程之自定义文件与代码模板详解
2017/07/17 Python
python切片及sys.argv[]用法详解
2018/05/25 Python
Python Pillow Image Invert
2019/01/22 Python
python实现弹跳小球
2019/05/13 Python
pytorch中的自定义反向传播,求导实例
2020/01/06 Python
python爬虫中采集中遇到的问题整理
2020/11/27 Python
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(一)
2013/01/21 HTML / CSS
师范生实习的个人自我鉴定
2013/10/20 职场文书
医学院校毕业生自荐信范文
2014/01/01 职场文书
学生会主席演讲稿
2014/04/25 职场文书
电子商务求职信
2014/06/15 职场文书
2014年预备党员学习新党章思想汇报
2014/09/15 职场文书
八项规定个人对照检查材料思想汇报
2014/09/25 职场文书
2014年司法所工作总结
2014/11/22 职场文书
2015年挂职干部工作总结
2015/05/14 职场文书
历史名人教你十五个读书方法,赶快Get起来!
2019/07/18 职场文书
matplotlib如何设置坐标轴刻度的个数及标签的方法总结
2021/06/11 Python
springboot读取nacos配置文件
2022/05/20 Java/Android