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

		<dependency>
			<groupId>commons-fileupload</groupId>
			<artifactId>commons-fileupload</artifactId>
			<version>1.2.1</version>
		</dependency>
		<dependency>
		    <groupId>commons-io</groupId>
		    <artifactId>commons-io</artifactId>
		    <version>2.4</version>
		</dependency>

<div class="modal-body">
				<div>
					<p>已存在附件列表</p>
					<!-- 
					<div class="row" id="fuJiaList">
						
					</div>
					 -->
					 <table class="table table-bordered" >
					  <tbody id="fuJiaList">
					  
					  </tbody>
					 </table>
				</div>
				<hr/>
				<div style="margin-bottom: 5px;"><b>上传文件</b>(文件最大不能超过5M)</div>
				
					<div class="row">
						<label class="col-sm-4">请选择要上传的文件</label>
						<div class="col-sm-8">
							<input type="file" id="fileToUpload" name="fileToUpload" onchange="fileSelected();">
						</div>
						
						<div class="col-sm-12" id="fileName"></div>
						<div class="col-sm-12" id="fileSize"></div>
						<div class="col-sm-12" id="fileType" style="margin-bottom: 5px;"></div>
						<div class="col-sm-4">
							<input type="button" onclick="uploadFile()" id="uploadFileButton" value="上传"

								 disabled="false" class="btn btn-info btn-sm"/>
						</div>
						<div class="col-sm-12" id="progressNumber"></div>
						<div class="col-sm-12" id="divForProgress" style="display:none">
							<progress value="0" max="100" id="proDownFile" style="width: 567px;border-radius: 2px; border-left: 1px #ccc solid; border-right: 1px #ccc solid; border-top: 1px #aaa solid; background-color: #eee;">

							</progress>
						</div>
						
					</div>
					<input type="hidden" id="FuJia_courseId" name="courseId">
			</div>

 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.");
      }

		@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";
		}