springmvc使用CommonsMultipartFile上傳

原創

2020-02-21 02:50

maven導入jar包

<!-- 上傳組件包 -->
		<dependency>
			<groupId>commons-fileupload</groupId>
			<artifactId>commons-fileupload</artifactId>
			<version>1.3.1</version>
		</dependency>
		<dependency>
			<groupId>commons-io</groupId>
			<artifactId>commons-io</artifactId>
			<version>2.4</version>
		</dependency>

spring-mvc.xml配置文件中添加bean

 <!-- 配置文件上傳，如果沒有使用文件上傳可以不用配置，當然如果不配，那麼配置文件中也不必引入上傳組件包 -->
	<bean id="multipartResolver"
		class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
		<property name="maxUploadSize">
			<value>-1</value>
		</property>
		<property name="defaultEncoding">
			<value>UTF-8</value>
		</property>
	</bean>

控制器中的方法

@RequestMapping("/fileUpload")
    public ResponseEntity<Object> fileUpload(@RequestParam("uploadfile") CommonsMultipartFile file, HttpServletRequest req) throws IOException{

        long  startTime=System.currentTimeMillis();
        if(file==null){
            logger.info("文件爲空");
            return new ResponseEntity<Object>(returnFailure(),HttpStatus.OK);                       
        }else{
            //原文件名
            String originalName=file.getOriginalFilename();
            //存儲用文件名
            String goalName=new Date().getTime()+file.getOriginalFilename();        
            //當前文件夾
            int folderId=(int)req.getSession().getAttribute("currentFolderId");
            //Map<String, Object> directory=mainService.getFolderInfo(folderId);
            //用戶根文件夾名
            UserEntity user=(UserEntity)req.getSession().getAttribute("user");            
            String folderName=user.getFolderName();
            //當前時間
            DateFormat format=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
            String currentTime=format.format(new Date());
            //文件大小
            String fileSize=file.getSize()+"";
            //文件類型
            int typeId=FileTypeUtil.getType(originalName);
            
            Map<String, Object>map=new HashMap<String, Object>();
            map.put("fileName", originalName);
            map.put("filePath", rootDask+folderName+"/"+goalName);
            map.put("typeId", typeId);
            map.put("currentFolderId", folderId);
            map.put("fileSize", fileSize);
            map.put("currentTime", currentTime);
            
            File tempFile=new File(rootDask+folderName);
            if(!tempFile.exists()){
                tempFile.mkdir();
                logger.info("創建文件夾");
            }

            FileOutputStream os=new FileOutputStream(rootDask+folderName+"/"+goalName);
            //獲取輸入流 CommonsMultipartFile 中可以直接得到文件的流
                InputStream is=file.getInputStream();
                
                byte[] buffer =new byte[1024*1024];
                int bytesum = 0;
                int byteread = 0; 
                while ((byteread=is.read(buffer))!=-1)
                {
                   bytesum+=byteread;
                   os.write(buffer,0,byteread);
                   os.flush();
                } 
                os.close();
                is.close();    

               long  endTime=System.currentTimeMillis();
               logger.info(endTime-startTime+"毫秒");
               mainService.addFile(map);
        }
        
        
        return new ResponseEntity<Object>(HttpStatus.OK);
    }

html上的上傳控件

<!-- 進度條 -->
                    <div id="progress" style="width:400px;display:none;">
                        <div id="progress-bar" class="progress-bar" role="progressbar" aria-valuenow="60"
                             aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
                            <span id="percent">0%</span>
                        </div>                    
                    </div>
                <!-- 隱藏的上傳組件 -->
                <form id="uploadform" action="../main/fileUpload" method="post" enctype="multipart/form-data"> 
                    <input class="hide" type="file" id="hideupload" name="uploadfile" οnchange="change()"/>
                    <input class="hide" type="submit" id="submit_btn"/>
                </form>

js控制

	//file input 內容改變時觸發
	function change(){
		file = document.getElementById('hideupload').files[0]; 
		$("#progress").css("display","block");
		upload();
	}
	

    //上傳
    function upload(){  
        var xhr = new XMLHttpRequest();    
        var fd = new FormData();  
  
        fd.append("uploadfile", file);  
  
        //監聽事件  
        xhr.upload.addEventListener("progress", uploadProgress, false);  
  
        //發送文件和表單自定義參數  
        xhr.open("POST", "../main/fileUpload",true);  
  
        xhr.send(fd);  
    }  
    //上傳進度監視
    function uploadProgress(evt){  	    	
        if (evt.lengthComputable) {             	
            //evt.loaded：文件上傳的大小   evt.total：文件總的大小                      
            var percentComplete = Math.round((evt.loaded) * 100 / evt.total);      
            //加載進度條，同時顯示信息            
            $("#percent").html(percentComplete + '%')  
            $("#progress-bar").css("width",percentComplete*5+"px"); 
            if(percentComplete==100){
            	layer.msg('上傳成功!', {icon: 1});
            	$("#progress").css("display","none");
            }
            
        }  
    }