BootStrap fileinput.js文件上传组件实例代码
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
BootStrap fileinput.js文件上传组件实例代码的更多相关文章
- jQuery.uploadify文件上传组件实例讲解
1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好, ...
- JAVA中使用FTPClient实现文件上传下载实例代码
一.上传文件 原理就不介绍了,大家直接看代码吧 ? 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 ...
- Bootstrap fileinput:文件上传插件的基础用法
官网地址:http://plugins.krajee.com/ 官网提供的样例:http://plugins.krajee.com/file-input/demo 基础用法一 导入核心CSS及JS文件 ...
- ASP中文件上传组件ASPUpload介绍和使用方法
[导读]要实现该功能,就要利用一些特制的文件上传组件.文件上传组件网页非常多,这里介绍国际上非常有名的ASPUpload组件 1 下载和安装ASPUpload 要实现该功能,就要利用一些特制的文件上 ...
- Bootstrap fileinput.js,最好用的文件上传组件
本篇介绍如何使用bootstrap fileinput.js(最好用的文件上传组件)来进行图片的展示,上传,包括springMVC后端文件保存. 一.demo 二.插件引入 <link ty ...
- JS文件上传神器bootstrap fileinput详解
Bootstrap FileInput插件功能如此强大,完全没有理由不去使用,但是国内很少能找到本插件完整的使用方法,于是本人去其官网翻译了一下英文说明文档放在这里供英文不好的同学勉强查阅.另外附上一 ...
- js文件上传下载组件
在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 先说下要求: PC端全平台支持,要求支持Windows,Mac,Linux 支持所 ...
- Vue.js 3.0搭配.NET Core写一个牛B的文件上传组件
在开发Web应用程序中,文件上传是经常用到的一个功能. 在Jquery时代,做上传功能,一般找jQuery插件就够了,很少有人去探究上传文件插件到底是怎么做的. 简单列一下我们要做的技术点和功能点 使 ...
- vue大文件上传组件选哪个好?
需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制. 第一步: 前端修改 由于项目使用的是 ...
随机推荐
- Spring之AOP实现原理
- 服务器启动报mybatis配置错误
启动服务器时后台报了一大堆的错误,仔细检查发现都是冲着mybatis的配置文件去的,事实上配置文件的东西很少,经过反复启动服务器,发现了只要写了where条件就报错,不写就可以正常启动,经过百度发现m ...
- HGOI20180831 NOIP2018模拟
input1: 4 4 4 4 4 3 2 4 5 4 5 5 5 1 7 3 2 output1: Yes Yes Yes No 好的吧数学题QwQ考场上没人做出来qwq 就是判断两个矩形能否互相放 ...
- 自动更新前加密:Clickonce用法
一.加密dll 新建一个windows form application: static void Main(string[] args) { Process. ...
- emoji表情与unicode编码互转(JS,JAVA,C#)
1.表情字符转编码 [C#] Encoding.UTF32.GetBytes("
- Linux通过端口转发来访问内网服务(端口转发访问阿里云Redis数据库等服务)
# 安装rinetd wget http://www.boutell.com/rinetd/http/rinetd.tar.gz&&tar -xvf rinetd.tar.gz& ...
- Libre 6003 「网络流 24 题」魔术球 (网络流,最大流)
Libre 6003 「网络流 24 题」魔术球 (网络流,最大流) Description 假设有n根柱子,现要按下述规则在这n根柱子中依次放入编号为 1,2,3,4......的球. (1)每次只 ...
- 【POJ2631】Roads in the North 树的直径
题目大意:给定一棵 N 个节点的边权无根树,求树的直径. 代码如下 #include <cstdio> #include <algorithm> using namespace ...
- PowerDesigner 打印错误
PowerDesigner打开pdm文件时报“打印错误”(解决) 原创作品,出自 “深蓝的blog” 博客,欢迎转载,转载时请务必注明出处,否则追究版权法律责任. 深蓝的blog:http://b ...
- maven 整合支付宝,导入alipay-sdk-java包到本地仓库
maven 整合支付宝,导入alipay-sdk-java包到本地仓库 1.环境变量添加: MAVEN_HOME:(maven位置) M2_HOME:(maven位置) PATH:%M2_HOME ...