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

  

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>之前      

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

  

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

  

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

  


  

  

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

  

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

  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文件上传组件实例代码