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 相关文章推荐
EasyUI 中 MenuButton 的使用方法
Jul 14 Javascript
代码触发js事件(click、change)示例应用
Dec 13 Javascript
JQuery仿小米手机抢购页面倒计时效果
Dec 16 Javascript
jQuery中:checked选择器用法实例
Jan 04 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
Feb 02 Javascript
AngularJS实现路由实例
Feb 12 Javascript
微信小程序中添加客服按钮contact-button功能
Apr 27 Javascript
JS中封装axios来管控api的2种方式
Sep 11 Javascript
layer扩展打开/关闭动画的方法
Sep 23 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
Apr 29 Javascript
vue element table中自定义一些input的验证操作
Jul 18 Javascript
小程序中手机号识别的示例
Dec 14 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
在WIN98下以apache模块方式安装php
2006/10/09 PHP
php中操作memcached缓存进行增删改查数据的实现代码
2014/08/15 PHP
php新浪微博登录接口用法实例
2014/12/23 PHP
thinkphp制作404跳转页的简单实现方法
2016/09/22 PHP
phpmailer绑定邮箱的实现方法
2016/12/01 PHP
PHP实现的mysql读写分离操作示例
2018/05/22 PHP
PHP实现的CURL非阻塞调用类
2018/07/26 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
网页里控制图片大小的相关代码
2006/06/13 Javascript
jquery获取下拉列表的值为null的解决方法
2011/03/18 Javascript
jQuery拖动图片删除示例
2013/05/10 Javascript
js 获取radio按钮值的实例
2013/08/17 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
2014/10/14 Javascript
jQuery+css实现的切换图片功能代码
2016/01/27 Javascript
深入浅析JavaScript的API设计原则
2016/06/14 Javascript
JS手机端touch事件计算滑动距离的方法示例
2017/10/26 Javascript
关于layui flow loading占位图的实现方法
2019/09/21 Javascript
[04:40]2016国际邀请赛中国区预选赛全程TOP10镜头集锦
2016/07/01 DOTA
[01:02:38]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第二场 1月10日
2021/03/11 DOTA
Python实现MySQL操作的方法小结【安装,连接,增删改查等】
2017/07/12 Python
python 递归深度优先搜索与广度优先搜索算法模拟实现
2018/10/22 Python
python opencv摄像头的简单应用
2019/06/06 Python
Python3中urlencode和urldecode的用法详解
2019/07/23 Python
python利用datetime模块计算程序运行时间问题
2020/02/20 Python
pycharm工具连接mysql数据库失败问题
2020/04/01 Python
Scholastic父母商店:儿童书籍
2017/01/01 全球购物
英国品牌男装折扣网站:Brown Bag
2018/03/08 全球购物
Parfume Klik丹麦:香水网上商店
2018/07/10 全球购物
深圳-东方伟业笔试部分
2015/02/11 面试题
会计电算化专业应届大学生求职信
2013/10/22 职场文书
实习教师自我鉴定
2013/12/12 职场文书
写给爸爸的道歉信
2014/01/15 职场文书
外语专业毕业生自荐信
2014/04/14 职场文书
党支部群众路线整改措施思想汇报
2014/10/10 职场文书
庆祝教师节活动总结
2015/03/23 职场文书
SQL 尚未定义空闲 CPU 条件 - OnIdle 作业计划将不起任何作用
2021/06/30 SQL Server