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

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