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 相关文章推荐
W3C Group的JavaScript1.8 新特性介绍
May 19 Javascript
解析JavaScript中的不可见数据类型
Dec 02 Javascript
javascript获取URL参数与参数值的示例代码
Dec 20 Javascript
回车直接实现点击某按钮的效果即触发单击事件
Feb 27 Javascript
Javascript中call和apply函数的比较和使用实例
Feb 03 Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 Javascript
JavaScript中Date.toSource()方法的使用教程
Jun 12 Javascript
简单的JS控制button颜色随点击更改的实现方法
Apr 17 Javascript
chosen实现省市区三级联动
Aug 16 Javascript
react native 原生模块桥接的简单说明小结
Feb 26 Javascript
Node.js + express基本用法教程
Mar 14 Javascript
通过微信公众平台获取公众号文章的方法示例
Dec 25 Javascript
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抓屏函数实现屏幕快照代码分享
2014/01/02 PHP
PHP将HTML转换成文本的实现代码
2015/01/21 PHP
PHP配置ZendOpcache插件加速
2019/02/14 PHP
juqery 学习之六 CSS--css、位置、宽高
2011/02/11 Javascript
jquery.cookie.js使用指南
2015/01/05 Javascript
JavaScript调用浏览器打印功能实例分析
2015/07/17 Javascript
Js制作点击输入框时默认文字消失的效果
2015/09/05 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
2016/01/06 Javascript
进阶之初探nodeJS
2017/01/24 NodeJs
JS自动生成动态HTML验证码页面
2017/06/14 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
2017/06/16 Javascript
react-native ListView下拉刷新上拉加载实现代码
2017/08/03 Javascript
Vue.js2.0中的变化小结
2017/10/24 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
2017/11/30 Javascript
关于vue-router的那些事儿
2018/05/23 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
2018/09/12 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
2019/09/27 Javascript
python小技巧之批量抓取美女图片
2014/06/06 Python
Python中输出ASCII大文字、艺术字、字符字小技巧
2015/04/28 Python
利用python获取某年中每个月的第一天和最后一天
2016/12/15 Python
Python数据结构与算法之图结构(Graph)实例分析
2017/09/05 Python
Python多线程原理与用法实例剖析
2019/01/22 Python
python 画二维、三维点之间的线段实现方法
2019/07/07 Python
使用 Python 处理 JSON 格式的数据
2019/07/22 Python
Django框架models使用group by详解
2020/03/11 Python
python实现吃苹果小游戏
2020/03/21 Python
加拿大女鞋品牌:ALDO
2016/11/13 全球购物
美国美食礼品篮网站:Gourmet Gift Baskets
2019/12/15 全球购物
公司合作意向书
2014/04/01 职场文书
建筑工地门卫岗位职责
2014/04/30 职场文书
公司总经理任命书
2014/06/05 职场文书
官僚主义现象查摆问题整改措施
2014/10/04 职场文书
开除员工通知
2015/04/22 职场文书
安全教育观后感
2015/06/17 职场文书
大学生村官入党自传
2015/06/26 职场文书