springmvc + h5(进度条)文件上传

1.先上效果图

1.1弹出附件框

1.2选择文件，点击上传(这里做了一个简单的校验)

1.3点击上传

1.4上传成功 刷新列表

2. 知识点准备

2.1XMLHttpRequest

2.2H5 progress

2.3Springmvc 

2.4Maven项目下需要的Jar包

		
			commons-fileupload
			commons-fileupload
			1.2.1
		
		
		    commons-io
		    commons-io
		    2.4
		

3. 项目实施

3.1前台代码(这里用到的是bootstrap的模态窗)

				

					
已存在附件列表
					
					 
				
				

				
上传文件(文件最大不能超过5M)
				
					

						请选择要上传的文件
						

							
						
						
						

						

						

						

							

								 disabled="false" class="btn btn-info btn-sm"/>
						

3.2前台页js代码(XMLHttpRequest)

 function fileSelected() {
        var file = document.getElementById('fileToUpload').files[0];
        if (file) {
          var fileSize = 0;
          if (file.size > 1024 * 1024)
            fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
          else
            fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';

          document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
          document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
          document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
          
          if(file.size > 1024 * 1024 * 5){
        	  alert("文件大小超过5M，不能上传！");
        	  $("#uploadFileButton").attr("disabled","false");//文件过大时上传按钮不可
          }else{
        	  $("#uploadFileButton").removeAttr("disabled");
          }
          
          
        }
      }

      function uploadFile() {
    	var id= $("#id").val();
        var fd = new FormData();
        fd.append("file", document.getElementById('fileToUpload').files[0]);
        fd.append("id",id);//添加参数 
        var xhr = new XMLHttpRequest();
        xhr.upload.addEventListener("progress", uploadProgress, false);//添加监听 更新进度条
        xhr.addEventListener("load", uploadComplete, false);//添加完成监听 
        xhr.addEventListener("error", uploadFailed, false);//添加错误监听 

	xhr.addEventListener("abort", uploadCanceled, false);
	xhr.open("POST", "URL");//URL改成你要上传的Action
        xhr.send(fd);//发送文件到后台
      }

      function uploadProgress(evt) {
    	var objPro=document.getElementById('proDownFile');
    	  //显示进度条
        $("#divForProgress").removeAttr("style");
        if (evt.lengthComputable) {
        
          var percentComplete = Math.round(evt.loaded * 100 / evt.total);
          document.getElementById('progressNumber').innerHTML = "已经上传"+percentComplete.toString() + '%';
          objPro.value=percentComplete.toString();
        }
        else {
          document.getElementById('progressNumber').innerHTML = 'unable to compute';
        }
      }
      //上传成功以后回调函数
      function uploadComplete(evt) {
        /* This event is raised when the server send back a response */
       	if( evt.target.responseText =="Y"){
       		alert("上传成功！");
       	}
      }

      function uploadFailed(evt) {
        alert("There was an error attempting to upload the file.");
      }

      function uploadCanceled(evt) {
        alert("The upload has been canceled by the user or the browser dropped the connection.");
      }

3.3后台代码(Springmvc)

		@RequestMapping("/fileupdate")
		@ResponseBody
		public String addFuJia(Integer id,HttpServletRequest request,@RequestParam("file") CommonsMultipartFile file){
			
			
			try {
				if(file.getSize()!=0){
					//文件上传
					
					String pathToBeSaved="/fileUpLoad"+file.getOriginalFilename();
					String path=request.getSession().getServletContext().getRealPath("/")+pathToBeSaved;
					
					File newFile=new File(path);
					//通过CommonsMultipartFile的方法直接写文件（注意这个时候）
					file.transferTo(newFile);
					
				}
				
			} catch (IllegalStateException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			} catch (IOException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
			return "Y";
		}