基于HTML5文件上传类设计.docVIP

基于HTML5文件上传类设计 　　摘要：在原生javascript环境下，利用HTML5的FormData对象，构建一个能够自动解析的类。利用该类能够实现拖拽多个文件、识别文件类型、异步上传文件、显示上传进度、上传后处理等功能。对于不兼容HTML5的浏览器能够实现传统的同步方式上传。 　　关键词：Javascript；HTML5；FormData；AJAX；异步；文件上传类 　　中图分类号：TP393 文献标识码：A 文章编号：1009-3044（2015）02-0072-03 　　2005年，Google在搜索web界面中推出了Google Suggest。Google Suggest使用AJAX创造出动态性极强的web界面：当您在谷歌的搜索框输入关键字时，JavaScript会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。[1]其后，随着Google Reader、Google Map、Gmail等一大批产品的流行，AJAX这种与服务器交换数据并更新部分网页的艺术迅速的流行起来。但是，AJAX一直没有实现对文件对象的异步上传，直到HTML5的出现。 　　1 FormData对象 　　在HTML5标准中，XMLHttpRequest Level 2添加了一个新的接口FormData。利用FormData对象，我们可以通过JavaScript用一些键值对来模拟一系列表单控件，我们还可以使用XMLHttpRequest的send（）方法来异步的提交这个“表单”。比起普通的AJAX，使用FormData的最大优点就是我们可以异步上传一个二进制文件。[2] 　　1.1 构造 　　使用new方法构造一个FormData实例： 　　var form = new FormData（[formElement]）； 　　参数formElement为可选，可以包含任何形式的表单控件，如一个文本框，或是一个表单对象。 　　1.2 append方法 　　使用append方法可以给当前FormData对象实例添加一个键/值对： 　　form.append（name，value，[filename]）； 　　name表示一个字段名称，value表示一个字段值。value可以是一个字符串，或者一个二进制大对象或文件；如果给出的数据是其它类型比如整数型，会被自动转换成字符串型[3]。当value为一个二进制大对象或文件时，可选参数filename将以字符串的形式发送给服务器。 　　1.3 delete方法 　　使用delete方法可以删除当前FormData对象实例的一个键/值对： 　　form.delete（name）； 　　1.4 get方法 　　使用get方法可以读取当前FormData对象实例对应键的值： 　　var value = form.get（name）； 　　此外，还有以数组形式返回所有键/值对的getAll方法，检查否是含有某键的has方法，和更新已有键/值对的set方法。delete、get、getAll、has、set方法仅支持Chrome、Opera浏览器的部分版本[4]。 　　2 表单 　　HTML5的文件API有一个FileList接口，可以通过e.dataTransfer.files拖拽事件传递的文件信息获得本地文件列表，因此理论上可以使用任何DOM替代文本域作为拖拽区域。为了兼容不支持HTML5的浏览器，仍然需要使用文本域来访问本地文件系统。 　　utf8和authenticity_token字段由框架自动生成，用来防止外部提交。file[file][]字段为文件域，支持多文件，文件列表为数组形式；文本域的样式设置为同外部DIV同宽同高，且不透明度为0。图1中FILE图案的位置对应为文本域的浏览按钮，点击可打开文件选择对话框。 　　work方法以this.FileField文本域为起点查找父节点，通过迭代方式最终获得表单对象。将表单对象所属控件按键/值对的形式存入this.data以便于多次提交。this.uploader一般情况下应等于表单的动作，也可以通过对实例属性赋值进行重设。在上传开始前设置文本域为不可见以防止在多个大文件上传的过程中用户再次操作文本域造成错误。如果页面上没有进度条，则将主动创建的进度条置于文件域的位置，如图4所示，这样不会因为新页面元素的加入造成页面变形。up方法以异步方式上传数据，需用到FormData对象；IE6等不支持HTML5的浏览器会运行错误，因此使用try{}catch（e）{}方法进行错误控制，使IE6等浏览器运行同步提交表单动作，即form.submit（）。 　　work方法的参数有3个，succFunc、err