HTML5文件上传

利用HTML5的新特性进行处理

1、所需jar包：commons-fileupload-1.2.2.jar 、commons-io-2.1.jar

2、环境：后台Java、前台动态语言JSP

3、运行环境：浏览器支持HTML 5新功能

1、添加几个需求元素：

<!-- 文件上传实现 -->
			<input  id="sampleFile" name="sampleFile"  type="file" οnchange="fileSelected();" /> <br />
			<div id="fileName"></div>
			<div id="fileSize"></div>
			<div id="fileType"></div>
			<div id="progressNumber"></div>
			<input  id="uploadBtn" type="button"  value="Ajax Submit" onClick="performAjaxSubmit();"></input>
			<div id="previewPic"></div><!-- 图片文件的预览 -->

2、编写脚本：

	<script type="text/javascript">
           function fileSelected() {
        	  var file = document.getElementById('sampleFile').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;   //fileType必须没有才行 
        	  }
        	}
        
          function uploadProgress(evt) {
        	  if (evt.lengthComputable) {
        	    var percentComplete = Math.round(evt.loaded * 100 / evt.total);
        	    document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
        	  }
        	  else {
        	    document.getElementById('progressNumber').innerHTML = 'unable to compute';
        	  }
        	}
         
        	function performAjaxSubmit() {
        		var sampleFile = document.getElementById("sampleFile").files[0];
        		var formdata = new FormData();
        		formdata.append("sampleFile", sampleFile);	
        		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","${ctx}/user/file.action?method:uploadFile=xx", true);
        		xhr.send(formdata);
        		xhr.onload = function(e) {
	       			if (this.status == 200) {   
	       			  eval("var json="+this.responseText);
	       			  //将图片显示出来
	 	       		  $("#previewPic").append("<img src='${ctx}/user/file.action?method:previewPic&fileId="+json.fileId+"' ><img>");
                    }
	        	};	        		
        	}
		</script>

估计大家对于var formdata = new FormData();这段代码比较疑惑，这是HTML5新添的对象

3、后台fileAction处理函数：

public void uploadFile() throws ServletException, IOException {
		String status = "";     
		String serverRealPath = "";
		Long fileId = 0l;
		HttpServletResponse  response = ServletActionContext.getResponse();
		HttpServletRequest  request = ServletActionContext.getRequest();
		String  saveDirectory = "D:\\njupt\\blog\\";
		File mir = new File(saveDirectory);
		if(!mir.exists())  mir.mkdir();
		try {
			DiskFileItemFactory dtf = new DiskFileItemFactory();  //磁盘对象
			ServletFileUpload upload = new ServletFileUpload(dtf);//声明解析request的对象
			List<FileItem> items = upload.parseRequest(request);
			for (FileItem item : items) {
					String fileName = item.getName();
					InputStream content = item.getInputStream();
					String tempName = System.currentTimeMillis() + ".blog.file";
					
					
					status = "upload Success!";
					serverRealPath = f.getAbsolutePath();
					fileId = upf.getId();
			}
		} catch (FileUploadException e) {
		  throw new ServletException("Parsing file upload failed.", e);
	  }
		response.setContentType("text/html");
		response.setCharacterEncoding("UTF-8");
		response.getWriter().print("{status:'"+status+"',path:'"+serverRealPath+"',fileId:"+fileId+"}");
	}

4、运行效果：