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

简介: 1.首先我们下载好fileinput插件引入插件?123 2.html设置:?123    3.

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

?
1
2
3
<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设置:

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

3.初始化设置:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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

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

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

 

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

servlet:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@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就能获取一个或者多个上传的文件。上面代码主要核心代码:

?
1
2
3
<span style= "font-size:14px;" >String path = request.getSession().getServletContext().getRealPath( "/headUpload" );
       UploadMediaService upload= new UploadMediaService();
       String headimage=upload.getMeiaName(path, request);</span>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<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文件上传组件实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

原文链接:http://blog.csdn.net/u010288264/article/details/51276149

如何联系我:【万里虎】www.bravetiger.cn 【QQ】3396726884 (咨询问题100元起,帮助解决问题500元起) 【博客】http://www.cnblogs.com/kenshinobiy/
目录
相关文章
|
4月前
|
数据可视化 JavaScript 架构师
D3.js实战:数据可视化高级技巧实例应用
本文介绍了D3.js入门,包括创建HTML文件引入库、绘制简单线图、柱状图和饼图。示例展示了数据绑定、交互性和动画效果,如柱状图的悬停效果和线图的数据平滑过渡。此外,还提及力导向图和地图可视化的实现,以及使用Enter, Update, Exit模式进行动态更新。最后提到了复杂图表和高级技巧,如使用组件库、动画、交互性和性能优化。
82 0
|
11天前
|
存储 JavaScript 前端开发
【Vue.js的神秘力量】一键解锁:如何让Bootstrap和Vuex成为你的开发超能力?
【8月更文挑战第30天】Vue.js是一个轻量且灵活的JavaScript框架,易于上手且功能强大。为提高开发效率和应用交互性,常需集成第三方库。本文介绍如何在Vue.js项目中集成Bootstrap和Vuex,及其它常见第三方库。Bootstrap提供响应式设计和预制组件,通过安装插件和引入CSS/JS即可集成;Vuex作为官方状态管理库,通过安装并创建store来管理组件状态。此外,Vue.js还可轻松集成Axios和Vue Router等库,提升HTTP请求和页面路由功能。合理选择和集成第三方库能显著提升开发效率,但需保持代码可维护性和可读性。
13 0
|
11天前
|
前端开发 JavaScript 开发者
Vue.js 与第三方库的神秘融合:Bootstrap、Vuex 等究竟带来何种惊喜?
【8月更文挑战第30天】Vue.js 作为一款流行的前端框架,凭借其强大的功能和易用性深受开发者喜爱。它不仅能独立运作,还能无缝集成各种第三方库,显著提升开发效率。例如,通过 `vue-bootstrap`,我们可以轻松引入 Bootstrap 的响应式组件,快速打造美观的用户界面;借助 Vuex,Vue 提供的状态管理方案,能有效解决复杂应用中的状态共享难题。此外,诸如 `axios` 和 `moment` 等库也能进一步增强 Vue 的功能,使其成为构建高性能前端应用的理想选择。
23 0
|
11天前
|
设计模式 JavaScript 前端开发
Vue.js 与第三方库的奇妙融合,Bootstrap 和 Vuex 究竟能带来何种意想不到的变革?
【8月更文挑战第30天】在现代Web开发中,结合使用JavaScript设计模式与框架如Vue.js能显著提升代码质量和项目的可维护性。本文探讨了常见JavaScript设计模式及其在Vue.js中的应用。通过具体示例介绍了工厂模式、单例模式和策略模式的应用场景及其实现方法。例如,工厂模式通过`NavFactory`根据用户角色动态创建不同的导航栏组件;单例模式则通过全局事件总线`eventBus`实现跨组件通信;策略模式用于处理不同的表单验证规则。这些设计模式的应用不仅提高了代码的复用性和可维护性,还使得Vue应用更加模块化和灵活。
10 0
|
2月前
|
开发框架 前端开发 JavaScript
循序渐进BootstrapVue,开发公司门户网站(1)---基于Bootstrap网站模板构建组件界面
循序渐进BootstrapVue,开发公司门户网站(1)---基于Bootstrap网站模板构建组件界面
|
28天前
|
JavaScript
js之选项卡制作实例
js之选项卡制作实例
23 0
|
2月前
|
设计模式 缓存 JavaScript
js设计模式实例
【7月更文挑战第2天】JavaScript设计模式包含工厂、单例、建造者、抽象工厂和代理模式等,它们是最佳实践和可重用模板,解决创建、职责分配和通信等问题。例如,工厂模式封装对象创建,单例确保全局唯一实例,建造者模式用于复杂对象构建,抽象工厂创建相关对象集合,而代理模式则控制对象访问。这些模式提升代码质量、可读性和灵活性,是高效开发的关键。
26 0
|
3月前
|
前端开发 JavaScript 容器
程序技术好文:纯原生javascript下拉框表单美化实例教程
程序技术好文:纯原生javascript下拉框表单美化实例教程
27 0
|
3月前
|
JavaScript BI
技术笔记:JS获取子节点、父节点和兄弟节点的方法实例总结
技术笔记:JS获取子节点、父节点和兄弟节点的方法实例总结
32 0
|
4月前
|
JavaScript
js中如何使用工厂方式和构造函数创建对象,web开发项目实例
js中如何使用工厂方式和构造函数创建对象,web开发项目实例