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"。

 

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