zoukankan      html  css  js  c++  java
  • 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"。

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

  • 相关阅读:
    数据库范式 说明
    javascript链式调用实现方式总结
    jQuery工作原理解析以及源代码示例
    jquery 中 (function( window, undefined ) {})(window)写法详解(转)
    jQuery基础---filter()和find()
    使用PHP连接、操纵Memcached的原理和教程
    一篇memcache基础教程
    css书写规范
    可穿戴设备的未来市场
    axure篇
  • 原文地址:https://www.cnblogs.com/amosleaf/p/2695770.html
Copyright © 2011-2022 走看看