Bootstrap的fileinput插件实现多文件上传的方法

发布时间：2020-12-17 20:57:32 所属栏目：安全来源：网络整理

导读：*1.bootstrap-fileinput 插件git下载地址 https://github.com/kartik-v/bootstrap-fileinput.git 2.解决使用bootstrap-fileinput得到返回值上传图片 ? 1 2 3 4 5 6 7 8 9 10 11 12 $( "#file-0a" ).fileinput({ uploadUrl : "/upload_img" , //上传图片的ur

*1.bootstrap-fileinput 插件git下载地址

https://github.com/kartik-v/bootstrap-fileinput.git

2.解决使用bootstrap-fileinput得到返回值

上传图片

 
    ? 
   
         $( 
         "#file-0a" 
         ).fileinput({ 
        
         uploadUrl :  
         "/upload_img" 
         , 
         //上传图片的url 
        
         allowedFileExtensions : [  
         'jpg' 
         'png' 
         'gif' 
          ], 
        
         overwriteInitial :  
         false 
         maxFileSize : 1000,0)!important'>//上传文件最大的尺寸 
        
         maxFilesNum : 1,0)!important'>//上传最大的文件数量 
        
         initialCaption:  
         "请上传商家logo" 
         //文本框初始话value 
        
         //allowedFileTypes: ['image','video','flash'], 
        
         slugCallback :  
         function 
         (filename) { 
        
         return 
          filename.replace( 
         '(' 
         '_' 
         ).replace( 
         ']' 
         ); 
        
         } 
        
         });

注意上传图片事件完之后，得到返回值写法

'#file-0a' 
         ).on( 
         'fileuploaded' 
         (event,data,previewId,index) { 
        
         var 
          form = data.form,files = data.files,extra = data.extra, 
        
         response = data.response,reader = data.reader; 
        
         console.log(response); 
         //打印出返回的json 
        
         console.log(response.paths); 
         //打印出路径 
        
         2

<input id= "file-0a" class= "file" type= multiple

 
         data-min-file-count= 
         "1" 
          name= 
         "upload_logo" 
         > 
        

其中data-min-file-count=”1”是指文件上传最低数量

3.服务端代码

采用了spring自带插件上传，框架为Springmvc

Bean

import java.util.List; 
        
         public class Picture { 
        
         private List<String> paths; 
        
         public List<String> getPaths() 
        
         { 
        
          paths; 
        
         } 
        
         public void setPaths(List<String> paths) 
        
         { 
        
         this 
         .paths = paths; 
        
         }  
        
         }

@ResponseBody 
        
         @RequestMapping(value= 
         "upload_img" 
         public Picture uploadImage(@RequestParam MultipartFile[] upload_logo) throws IOException{ 
        
         log.info( 
         "上传图片" 
         ); 
        
         Picture pic =  
         new 
          Picture(); 
        
         List<String> paths =  
          ArrayList<String>(); 
        
         String dir = UploadUtil.getFolder(); 
        
         for 
         (MultipartFile myfile : upload_logo){  
        
         if 
         (myfile.isEmpty()){  
        
         "文件未上传" 
         );  
        
         } 
         else 
         {  
        
         "文件长度: " 
          + myfile.getSize());  
        
         "文件类型: " 
          + myfile.getContentType());  
        
         "文件名称: " 
          + myfile.getName());  
        
         "文件原名: " 
          + myfile.getOriginalFilename());  
        
         "========================================" 
         ); 
        
         //上传文件 返回路径 
        
         String path = UploadUtil.writeFile(myfile.getOriginalFilename(),dir,myfile.getInputStream()); 
        
         "文件路径:" 
         +path); 
        
         paths.add(path); 
        
         }  
        
         }  
        
         pic.setPaths(paths); 
        
          pic; 
        
         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 
       
      private static final Logger log = LoggerFactory.getLogger(UploadUtil.class);
 
         private UploadUtil() { 
        
         } 
        
         private static SimpleDateFormat fullSdf =  
          SimpleDateFormat( 
         "yyyyMMddHHmmssSSS" 
         private static SimpleDateFormat folder =  
          SimpleDateFormat( 
        
         "yyyy" 
          + File.separator +  
         "MM" 
         "dd" 
         ); 
        
         /** 
        
         * 返回yyyy File.separator MM File.separator dd格式的字符串 
        
         *  
        
         * @return 
        
         */ 
        
         public static String getFolder() { 
        
          folder.format( 
          Date()); 
        
         } 
        
         /** 
        
         * 文件上传 
        
         *  
        
         * @param srcName 
        
         * 原文件名 
        
         * @param dirName 
        
         * 目录名 
        
         * @param input 
        
         * 要保存的输入流 
        
         * @return 返回要保存到数据库中的路径 
        
         */ 
        
         public static String writeFile(String srcName,String dirName,InputStream input) throws IOException { 
        
         log.info(srcName); 
        
         // 取出上传的目录，此目录是tomcat的server.xml中配置的虚拟目录 
        
         String uploadDir = ContextUtil.getSysProp( 
         "upload_dir" 
         ); 
         //设置你上传路径 
        
         // 取出虚拟目录的访问路径 
        
         String virtualDir = ContextUtil.getSysProp( 
         "virtual_dir" 
         //设置你虚拟目录访问路径 
        
         // 重命名文件 
        
          ( 
         null 
          != srcName) { 
        
         srcName = srcName.substring(srcName.indexOf( 
         "." 
         )); 
        
         }  
          { 
        
         srcName =  
         ".jpg" 
         ; 
        
         } 
        
         String filename =  
         "" 
         ; 
        
         // 得到要上传的文件路径 
        
         filename = uploadDir + File.separator + dirName + File.separator + fullSdf.format( 
          Date()) + srcName; 
        
         // 得到将要保存到数据中的路径 
        
         String savePath = filename.replace(uploadDir,monospace!important; min-height:auto!important'>); 
        
         savePath = virtualDir + savePath.replace( 
         "" 
         "/" 
         ); 
        
         File file =  
          File(filename); 
        
          (!file.getParentFile().exists()) { 
        
         file.getParentFile().mkdirs(); 
        
         } 
        
         FileOutputStream fos =  
          FileOutputStream(file); 
        
         // 一次30kb 
        
         byte[] readBuff =  
          byte[1024 * 30]; 
        
         int count = -1; 
        
         while 
          ((count = input.read(readBuff,readBuff.length)) != -1) { 
        
         fos.write(readBuff,count); 
        
         } 
        
         fos.flush(); 
        
         fos.close(); 
        
         input.close(); 
        
          savePath; 
        
相关内容
bootstrap-datetimepicker.min.js日期插件使用记录
python  –  Docker,Supervisord和日志记录 – 如何整合Doc
详解Bootstrap创建表单的三种格式（一）
AJAX+Webservice传递多个参数
shell之except
bootstrap 禁用 modal 点击空白处关闭事件
bash – 将一系列矩阵文件转换为awk中的坐标索引
WebService笔记之即时发布(Axis1.4)
bash – 在Mac OS上安装aws eb cli
Bootstrap Table使用整理（三）