Html5 上传文件

1. 目前常用版本的浏览器除了IE9之外，基本支持Html5的文件上传所需的Javascript对象， window.File/FileReader/Blob/FormData。据说IE10支持,但我没有测试过。

Html5 File API地址： http://www.w3.org/TR/FileAPI/ 

2. Html5 除了支持文件多选， 还支持拖拽上传， Chrome浏览器还支持文件夹上传(属性：webkitdirectory)，这个特性不错，不知将来能否加入标准。

选中文件，触发事件，开始上传:

	// file selection
	function FileSelectHandler(e) {
		var event = e || window.event;
		// cancel event and hover styling
		FileDragHover(event);
		// fetch FileList object
		var files = event.target.files || event.dataTransfer.files;
		// process all File objects
		for (var i = 0, file; i <files.length; i++) {
			file = files[i]
			UploadFile(file);
		}
	}
　　　　 
	function UploadFile(file){
		var xhr = new XMLHttpRequest();
		if(xhr.upload){
			xhr.upload.addEventListener("progress", showUploadProgress, false);
			//start upload
			var uploadURL = "/test/uploadFile";
			xhr.open("post", uploadURL, true);
			var formData = new FormData();
			formData.append("uploadFile", file);
			xhr.send(formData);
		}
	}

上面的上传，如果是大文件的话，那么PC的CPU利用率会瞬间上去， 主要是读取文件，可能会导致浏览器假死。

那么，一个折中的办法：

 一次上传文件的一部分，比如一次上传1M。 使用File的 slice/webkitSlice/mozSlice方法,一次读取1M到内存然后上传。

问题： 这样的话就会出现很多的短连接， 比如一个10M的文件要建立10次Http连接，但是短连接多了会有什么问题或者好处呢？

(1)失败重试式的断点上传。

(2)CPU不会一直在高位，因为建立HTTP连接，耗时但是不耗CPU使用率。

(3)。。。。。。

 

另外， 使用 WebSocket也可以上传文件，目前Tomcat7.03已经支持WebSocket了"WebSocketServlet"。

 

未完待续。。。。，暂时发布一下。