SpringMVC之文件上传（进度条显示）

1、实现org.apache.commons.fileupload.ProgressListener接口

 
 

   
   

    
    

   
   
   
   

    
    

     
     import javax.servlet.http.HttpSession;
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     import org.apache.commons.fileupload.ProgressListener;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     import org.springframework.stereotype.Component;
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     import com.chinalife.cip.web.multipart.model.Progress;
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     @Component
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     public class FileUploadProgressListener implements ProgressListener {
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     	private HttpSession session;
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     	public void setSession(HttpSession session){
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     		this.session=session;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     		Progress status = new Progress();
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     		session.setAttribute("status", status);
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     	}
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     	/*
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     	 * pBytesRead 到目前为止读取文件的比特数 pContentLength 文件总大小 pItems 目前正在读取第几个文件
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     	 */
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     	public void update(long pBytesRead, long pContentLength, int pItems) {
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     		Progress status = (Progress) session.getAttribute("status");
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     		status.setpBytesRead(pBytesRead);
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     		status.setpContentLength(pContentLength);
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     		status.setpItems(pItems);
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     	}
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     }
    
    
   
   
 
 

 

2、扩展org.springframework.web.multipart.commons.CommonsMultipartResolver类

      重写public MultipartParsingResult parseRequest(HttpServletRequest request) throws MultipartException方法

 
 

   
   

    
    

   
   
   
   

    
    

     
     import java.util.List;
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     import javax.servlet.http.HttpServletRequest;
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     import org.apache.commons.fileupload.FileItem;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     import org.apache.commons.fileupload.FileUpload;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     import org.apache.commons.fileupload.FileUploadBase;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     import org.apache.commons.fileupload.FileUploadException;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     import org.apache.commons.fileupload.servlet.ServletFileUpload;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     import org.springframework.beans.factory.annotation.Autowired;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     import org.springframework.web.multipart.MaxUploadSizeExceededException;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     import org.springframework.web.multipart.MultipartException;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     import org.springframework.web.multipart.commons.CommonsMultipartResolver;
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     import com.chinalife.cip.web.multipart.listener.FileUploadProgressListener;
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     public class CustomMultipartResolver extends CommonsMultipartResolver {
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     	@Autowired
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     	private FileUploadProgressListener progressListener;
    
    
   
   

   
   

    
    

   
   
   
   

    
    
	
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     	public void setFileUploadProgressListener(FileUploadProgressListener progressListener){
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     		this.progressListener=progressListener;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     	}
    
    
   
   

   
   

    
    

   
   
   
   

    
    
	
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     	@Override
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     	@SuppressWarnings("unchecked")
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     	public MultipartParsingResult parseRequest(HttpServletRequest request)
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     			throws MultipartException {
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     		String encoding = determineEncoding(request);
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     		FileUpload fileUpload = prepareFileUpload(encoding);
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     		progressListener.setSession(request.getSession());
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     		fileUpload.setProgressListener(progressListener);
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     		try {
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     			List
     
     <FileItem> fileItems = ((ServletFileUpload) fileUpload).parseRequest(request);
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     			return parseFileItems(fileItems, encoding);
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     		}
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     		catch (FileUploadBase.SizeLimitExceededException ex) {
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     			throw new MaxUploadSizeExceededException(fileUpload.getSizeMax(), ex);
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     		}
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     		catch (FileUploadException ex) {
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     			throw new MultipartException("Could not parse multipart servlet request", ex);
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     		}
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     	}
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     } 
    
    
   
   
 
 

 

3、mvc命名空间声明

 
 

   
   

    
    

   
   
   
   

    
    

     
     <bean id="multipartResolver" class="com.chinalife.cip.web.multipart.CustomMultipartResolver">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
	
     
     <property name="maxUploadSize" value="50000000" />
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     </bean>
    
    
   
   
 
 

4、获取文件controller编写

 
 

   
   

    
    

   
   
   
   

    
    

     
     @RequestMapping(...)
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     public String uploadFile(@RequestParam(value = "file") MultipartFile... files) throws IOException {
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     	for (MultipartFile f : files) {
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     		if (f.getSize() > 0) {
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     			File targetFile = new File("目标文件路径及文件名");
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     			f.transferTo(targetFile);//写入目标文件
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     		}
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     	}
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     	return "...";
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     }
    
    
   
   
 
 

5、文件进度controller编写

 
 

   
   

    
    

   
   
   
   

    
    

     
     import java.util.Map;
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     import org.springframework.stereotype.Controller;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     import org.springframework.web.bind.annotation.RequestMapping;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     import org.springframework.web.bind.annotation.RequestMethod;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     import org.springframework.web.bind.annotation.ResponseBody;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     import org.springframework.web.bind.annotation.SessionAttributes;
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     import com.chinalife.cip.web.multipart.model.Progress;
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     @Controller
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     @SessionAttributes("status")
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     public class ProgressController {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     	@RequestMapping(value = "/upfile/progress", method = RequestMethod.POST )
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     	@ResponseBody
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     	public String initCreateInfo(Map
     
     <String, Object> model) {
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     		Progress status = (Progress) model.get("status");
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     		if(status==null){
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     			return "{}";
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     		}
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     		return status.toString();
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     	}
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     }
    
    
   
   
 
 

6、最后

       html及js脚本就不在此赘述了，网上有很多例子，给出一个示例。

 
 

   
   

    
    

   
   
   
   

    
    

     
     <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     <c:set var="ctx" value="${pageContext.request.contextPath}" />
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     <!DOCTYPE html>
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     <html> 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     <head>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
	
     
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
	
     
     <title>文件上传
     
     </title>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
	
     
     <script type="text/javascript"  src="${ctx}/js/jquery-2.1.4/jquery-2.1.4.js">
     
     
     
     </script>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
	
     
     <script type="text/javascript" src="${ctx}/js/bootstrap-3.3.5/js/bootstrap.min.js">
     
     
     
     </script>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     <link rel="stylesheet" href="${ctx}/js/bootstrap-3.3.5/css/bootstrap.min.css" />
    
    
   
   

   
   

    
    

   
   
   
   

    
    
	
     
     <style type="text/css">
     
     
    
    
   
   

   
   

    
    

   
   
   
   

    
    
		
     
     .file-box {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
			
     
     position: relative;
    
    
   
   

   
   

    
    

   
   
   
   

    
    
			
     
     width: 
     
     340px
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     		}
    
    
   
   

   
   

    
    

   
   
   
   

    
    
		
    
    
   
   

   
   

    
    

   
   
   
   

    
    
		
     
     .txt {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
			
     
     height: 
     
     22px;
    
    
   
   

   
   

    
    

   
   
   
   

    
    
			
     
     border: 
     
     1px solid 
     
     #cdcdcd;
    
    
   
   

   
   

    
    

   
   
   
   

    
    
			
     
     width: 
     
     180px;
    
    
   
   

   
   

    
    

   
   
   
   

    
    
			
     
     vertical-align: middle;
    
    
   
   

   
   

    
    

   
   
   
   

    
    
			
     
     margin: 
     
     0;
    
    
   
   

   
   

    
    

   
   
   
   

    
    
			
     
     padding: 
     
     0
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     		}
    
    
   
   

   
   

    
    

   
   
   
   

    
    
		
    
    
   
   

   
   

    
    

   
   
   
   

    
    
		
     
     .btn {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
			
     
     border: 
     
     1px solid 
     
     #CDCDCD;
    
    
   
   

   
   

    
    

   
   
   
   

    
    
			
     
     height: 
     
     24px;
    
    
   
   

   
   

    
    

   
   
   
   

    
    
			
     
     width: 
     
     70px;
    
    
   
   

   
   

    
    

   
   
   
   

    
    
			
     
     vertical-align: middle;
    
    
   
   

   
   

    
    

   
   
   
   

    
    
			
     
     margin: 
     
     0;
    
    
   
   

   
   

    
    

   
   
   
   

    
    
			
     
     padding: 
     
     0
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     		}
    
    
   
   

   
   

    
    

   
   
   
   

    
    
		
    
    
   
   

   
   

    
    

   
   
   
   

    
    
		
     
     .file {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
			
     
     position: absolute;
    
    
   
   

   
   

    
    

   
   
   
   

    
    
			
     
     top: 
     
     0;
    
    
   
   

   
   

    
    

   
   
   
   

    
    
			
     
     right: 
     
     80px;
    
    
   
   

   
   

    
    

   
   
   
   

    
    
			
     
     height: 
     
     24px;
    
    
   
   

   
   

    
    

   
   
   
   

    
    
			
     
     filter: 
     
     alpha(opacity :   0);
    
    
   
   

   
   

    
    

   
   
   
   

    
    
			
     
     opacity: 
     
     0;
    
    
   
   

   
   

    
    

   
   
   
   

    
    
			
     
     width: 
     
     260px;
    
    
   
   

   
   

    
    

   
   
   
   

    
    
			
     
     vertical-align: middle;
    
    
   
   

   
   

    
    

   
   
   
   

    
    
			
     
     margin: 
     
     0;
    
    
   
   

   
   

    
    

   
   
   
   

    
    
			
     
     padding: 
     
     0
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     		}
    
    
   
   

   
   

    
    

   
   
   
   

    
    
	
     
     </style>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    
	
     
     <script type="text/javascript">
     
     
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     	    <%-- 
    
    
   
   

   
   

    
    

   
   
   
   

    
    
	    
     
     function myInterval()
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     	       {
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     	    	   $(
     
     "#progress").html(
     
     "");
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     	    	   $.ajax({
    
    
   
   

   
   

    
    

   
   
   
   

    
    
	    		   
     
     type: 
     
     "POST",
    
    
   
   

   
   

    
    

   
   
   
   

    
    
	    		   
     
     url: 
     
     "<%=basePath%>UserControllers/getSessions",
    
    
   
   

   
   

    
    

   
   
   
   

    
    
				
     
     data : 
     
     "1=1",
    
    
   
   

   
   

    
    

   
   
   
   

    
    
				
     
     dataType : 
     
     "text",
    
    
   
   

   
   

    
    

   
   
   
   

    
    
				
     
     success : 
     
     function(msg) {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
					
     
     var data = msg;
    
    
   
   

   
   

    
    

   
   
   
   

    
    
					
     
     console.log(data);
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     					$(
     
     "#pdiv").css(
     
     "width", data + 
     
     "%");
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     					$(
     
     "#progress").html(data + 
     
     "%");
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     				}
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     			});
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     		}
    
    
   
   

   
   

    
    

   
   
   
   

    
    
		
     
     function autTime() {
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     			setInterval(
     
     "myInterval()", 
     
     200);
     
     //1000为1秒钟
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     		} 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     		--%>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
		
    
    
   
   

   
   

    
    

   
   
   
   

    
    
		
     
     function UpladFile() {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
			
     
     var fileObj = 
     
     document.getElementById(
     
     "file").files[
     
     0]; 
     
     // js 获取文件对象
    
    
   
   

   
   

    
    

   
   
   
   

    
    
			
     
     var FileController = 
     
     "${ctx}/upload/progress"; 
     
     // 接收上传文件的后台地址 
    
    
   
   

   
   

    
    

   
   
   
   

    
    
			
     
     // FormData 对象
    
    
   
   

   
   

    
    

   
   
   
   

    
    
			
     
     var form = 
     
     new FormData();
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     			form.append(
     
     "author", 
     
     "hooyes"); 
     
     // 可以增加表单数据
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     			form.append(
     
     "file", fileObj); 
     
     // 文件对象
    
    
   
   

   
   

    
    

   
   
   
   

    
    
			
     
     // XMLHttpRequest 对象
    
    
   
   

   
   

    
    

   
   
   
   

    
    
			
     
     var xhr = 
     
     new XMLHttpRequest();
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     			xhr.open(
     
     "post", FileController, 
     
     true);
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     			xhr.onload = 
     
     function() {
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     				alert(
     
     "上传完成!");
    
    
   
   

   
   

    
    

   
   
   
   

    
    
				
     
     //$('#myModal').modal('hide');
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     			};
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     			xhr.upload.addEventListener(
     
     "progress", progressFunction, 
     
     false);
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     			xhr.send(form);
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     		}
    
    
   
   

   
   

    
    

   
   
   
   

    
    
		
    
    
   
   

   
   

    
    

   
   
   
   

    
    
		
     
     function progressFunction(evt) {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
	
    
    
   
   

   
   

    
    

   
   
   
   

    
    
			
     
     var progressBar = 
     
     document.getElementById(
     
     "progressBar");
    
    
   
   

   
   

    
    

   
   
   
   

    
    
	
    
    
   
   

   
   

    
    

   
   
   
   

    
    
			
     
     var percentageDiv = 
     
     document.getElementById(
     
     "percentage");
    
    
   
   

   
   

    
    

   
   
   
   

    
    
	
    
    
   
   

   
   

    
    

   
   
   
   

    
    
			
     
     if (evt.lengthComputable) {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
	
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     				progressBar.max = evt.total;
    
    
   
   

   
   

    
    

   
   
   
   

    
    
	
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     				progressBar.value = evt.loaded;
    
    
   
   

   
   

    
    

   
   
   
   

    
    
	
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     				percentageDiv.innerHTML = 
     
     Math.round(evt.loaded / evt.total * 
     
     100)+ 
     
     "%";
    
    
   
   

   
   

    
    

   
   
   
   

    
    
	
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     			}
    
    
   
   

   
   

    
    

   
   
   
   

    
    
	
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     		}
    
    
   
   

   
   

    
    

   
   
   
   

    
    
	
     
     </script>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     </head>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     <body style="width: 80%;height: 80%;margin: 0px auto;">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
	
     
     <div class="row bootstrap-admin-no-edges-padding">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
		
     
     <div class="col-md-12">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
			
     
     <div class="panel panel-default">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
				
     
     <div class="panel-heading">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
					
     
     <div class="text-muted bootstrap-admin-box-title">文件管理
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
				
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
				
     
     <div class="bootstrap-admin-panel-content">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
					
     
     <button class="btn btn-primary btn-lg" data-toggle="modal"
    
    
   
   

   
   

    
    

   
   
   
   

    
    
						
     
     data-target=
     
     "#myModal">上传
     
     </button>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
					
     
     <input type="text" id="test">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
				
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
			
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
		
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
	
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    
	
     
     <!-- 模态框（Modal） -->
    
    
   
   

   
   

    
    

   
   
   
   

    
    
	
     
     <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
    
    
   
   

   
   

    
    

   
   
   
   

    
    
		
     
     aria-labelledby=
     
     "myModalLabel" 
     
     aria-hidden=
     
     "true">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
		
     
     <div class="modal-dialog">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
			
     
     <div class="modal-content">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
				
     
     <div class="modal-header">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
					
     
     <button type="button" class="close" data-dismiss="modal"
    
    
   
   

   
   

    
    

   
   
   
   

    
    
						
     
     aria-hidden=
     
     "true">×
     
     </button>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
					
     
     <h4 class="modal-title" id="myModalLabel">文件上传进度
     
     </h4>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
				
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
				
     
     <div class="modal-body">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
					
     
     <progress id="progressBar" value="0" max="100"
    
    
   
   

   
   

    
    

   
   
   
   

    
    
						
     
     style=
     
     "width: 100%;height: 20px; "> 
     
     </progress>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
					
     
     <span id="percentage" style="color:blue;">
     
     </span> 
     
     <br>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
					
     
     <br>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
					
     
     <div class="file-box">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
						
     
     <input type='text' name='textfield' id='textfield' class='txt' />
    
    
   
   

   
   

    
    

   
   
   
   

    
    
						
     
     <input type='button' class='btn' value='浏览...' /> 
     
     <input
    
    
   
   

   
   

    
    

   
   
   
   

    
    
							
     
     type=
     
     "file" 
     
     name=
     
     "file" 
     
     class=
     
     "file" 
     
     id=
     
     "file" 
     
     size=
     
     "28"
    
    
   
   

   
   

    
    

   
   
   
   

    
    
							
     
     onchange=
     
     "document.getElementById('textfield').value=this.value" />
    
    
   
   

   
   

    
    

   
   
   
   

    
    
						
     
     <input type="submit" name="submit" class="btn" value="上传"
    
    
   
   

   
   

    
    

   
   
   
   

    
    
							
     
     onclick=
     
     "UpladFile()" />
    
    
   
   

   
   

    
    

   
   
   
   

    
    
						
    
    
   
   

   
   

    
    

   
   
   
   

    
    
					
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
				
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
				
     
     <div class="modal-footer">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
					
     
     <button type="button" class="btn btn-default" data-dismiss="modal">关闭
    
    
   
   

   
   

    
    

   
   
   
   

    
    
					
     
     </button>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
				
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
			
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
			
     
     <!-- /.modal-content -->
    
    
   
   

   
   

    
    

   
   
   
   

    
    
		
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
		
     
     <!-- /.modal -->
    
    
   
   

   
   

    
    

   
   
   
   

    
    
	
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     </body>
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     </html>