1。首先我们下载好fileinput插件引入插件
& lt;跨度祝辞& lt;链接类型=" text/css " rel="样式表" href=" https://www.yisu.com/zixun/fileinput/css/fileinput.css " rel=巴獠縩ofollow”/比; & lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/fileinput/js/fileinput.js "祝辞& lt;/script> & lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/fileinput/js/fileinput_locale_zh.js "祝辞& lt;/script> & lt;/span>>之前2. html设置:
& lt;跨度祝辞& lt;形式enctype=岸嗖糠?格式”比; & lt;输入id="文件" class="文件" type="文件" multiple> & lt;/form> & lt;/span>>之前3。初始化设置:
uploadUrl函数initFileInput (ctrlName) { var控制=$ (' # ' + ctrlName); control.fileinput ({ resizeImage:没错, maxImageWidth: 200, maxImageHeight: 200, resizePreference:“宽度”, 语言:“古银”,//设置语言 uploadUrl: uploadUrl, uploadAsync:没错, allowedFileExtensions:(jpg, png, ' gif '],//接收的文件后缀 showUpload:真的,//是否显示上传按钮 showCaption:真的,//是否显示标题 browseClass:“btn btn-primary ",//按钮样式 previewFileIcon:“& lt;我类=' glyphicon glyphicon-king的祝辞& lt;/i>”, maxFileCount: 3, msgFilesTooMany:“选择图片超过了最大数量”, maxFileSize: 2000, }); };//初始化控件initFileInput (id、uploadurl)控件id,与上传路径 initFileInput(“文件”、“tqyh/pushMessAction”);>之前注:要想使用控件自带的上传按钮,以及上传进度,必须用形式包裹
(当然也可以在初始化的时加入enctype:“多部分/格式”,是一样的)但不用定义行动& lt; strong> & lt;形式enctype=岸嗖糠?格式”比; & lt;输入id="文件" class="文件" type="文件" multiple> & lt;/form> & lt;/strong>>之前最后通过后台进行正常的上传就好了。
有些朋友说我没写明白,好吧我把后台代码贴出:
servlet:
@Override 分无效doPost (HttpServletRequest请求, HttpServletResponse响应) 抛出ServletException, io。IOException { 字符串路径=request.getSession () .getServletContext () .getRealPath ("/headUpload "); UploadMediaService上传=new UploadMediaService (); 字符串headimage=上传。getMeiaName(路径,请求); request.getSession ()。setAttribute (“headname headimage); System.out.println(“文件上传成功”); } @Override 分无效doGet (HttpServletRequest请求, HttpServletResponse响应) 抛出ServletException, io。IOException { doPost(请求、响应); }其实后台不用可以接收,我们通过解析请求就能获取一个或者多个上传的文件。上面代码主要核心代码:
& lt;跨在字符串路径=request.getSession () .getServletContext () .getRealPath ("/headUpload "); UploadMediaService上传=new UploadMediaService (); 字符串headimage=上传。getMeiaName(路径,请求);& lt;/span>>之前& lt;跨度祝辞UploadMediaService:/* * *上传媒体文件,存储在服务端 * * @param路径获取文件需要上传到的路径 * @param请求客户端请求 * @return */uploadLocalMedia公共静态字符串(字符串路径,HttpServletRequest请求){ 字符串文件名=" ";//获得磁盘文件条目工厂 DiskFileItemFactory工厂=new DiskFileItemFactory ();//如果没以下两行设置的话,上传大的文件会占用很多内存,//设置暂时存放的存储室,这个存储室,可以和最终存储文件的目录不同/* * *原理它是先存到暂时存储室,然后在真正写到对应目录的硬盘上, *按理来说当上传一个文件时,其实是上传了两份,第一个是以.tem格式的 *然后再将其真正写到对应目录的硬盘上 */工厂。setRepository(新文件(路径));//设置缓存的大小,当上传文件的容量超过该缓存时,直接放到暂时存储室 factory.setSizeThreshold (1024 * 1024);//高水平的API文件上传处理 ServletFileUpload上传=new ServletFileUpload(工厂); 尝试{//可以上传多个文件 List引导fileinput.js文件上传组件实例代码