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 相关文章推荐
jquery 插件 人性化的消息显示
Jan 21 Javascript
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
Sep 12 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
Jul 13 Javascript
js动态在form上插入enctype=multipart/form-data的问题
May 24 Javascript
使用javascript实现json数据以csv格式下载
Jan 09 Javascript
深入浅析JavaScript中的constructor
Apr 19 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
Feb 05 Javascript
Vue的百度地图插件尝试使用
Sep 06 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
Jan 29 Javascript
详解jQuery设置内容和属性
Apr 11 jQuery
七行JSON代码把你的网站变成移动应用过程详解
Jul 09 Javascript
vue动态绑定style样式
Apr 20 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简单实现MVC
2015/02/05 PHP
关于扩展 Laravel 默认 Session 中间件导致的 Session 写入失效问题分析
2016/01/08 PHP
详解PHP数据压缩、加解密(pack, unpack)
2016/12/17 PHP
Laravel框架搜索分页功能示例
2019/02/01 PHP
php装饰者模式简单应用案例分析
2019/10/23 PHP
JavaScript写的一个自定义弹出式对话框代码
2010/01/17 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
2015/07/27 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
2015/08/05 Javascript
BootStrap创建响应式导航条实例代码
2016/05/31 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
2016/06/14 Javascript
jQuery中delegate()方法的用法详解
2016/10/13 Javascript
bootstrap table 数据表格行内修改的实现代码
2017/02/13 Javascript
Angular如何在应用初始化时运行代码详解
2018/06/11 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
2019/10/10 jQuery
VUE实现Studio管理后台之鼠标拖放改变窗口大小
2020/03/04 Javascript
vue项目中使用bpmn为节点添加颜色的方法
2020/04/30 Javascript
[04:55]完美世界副总裁蔡玮:DOTA2的自由、公平与信任
2013/12/18 DOTA
Python字符转换
2008/09/06 Python
python 实现堆排序算法代码
2012/06/05 Python
python搭建简易服务器分析与实现
2012/12/15 Python
进一步理解Python中的函数编程
2015/04/13 Python
Django发送html邮件的方法
2015/05/26 Python
pyspark操作MongoDB的方法步骤
2019/01/04 Python
PyCharm中代码字体大小调整方法
2019/07/29 Python
如何获取Python简单for循环索引
2019/11/21 Python
Python正则表达式学习小例子
2020/03/03 Python
Pyspark读取parquet数据过程解析
2020/03/27 Python
Mio Skincare美国官网:身体紧致及孕期身体护理
2017/03/05 全球购物
美国演唱会和体育门票购买网站:Ticketnetwork
2018/10/19 全球购物
网络教育自我鉴定
2013/11/01 职场文书
师范生个人推荐信
2013/11/29 职场文书
法学求职信
2014/06/22 职场文书
毕业实习自我鉴定范文2014
2014/09/26 职场文书
2014年班级工作总结范文
2014/12/23 职场文书
人事部:年度述职报告范文
2019/07/12 职场文书
HTML基础详解(上)
2021/10/16 HTML / CSS