关于文件上传

关于文件上传（这边主要讲的是前端实现的思路）
前提:公司原来的上传控件使用的是swfupload，但是因为flash的落伍，和google对flash默认禁用，打算对控件进行改版
尝试:原来使用过plupload（支持html5，flash，h4等等方式），公司本身使用的ext有时候会和这个插件冲突，初始化对象必须指定container，在window中使用容易出现异步（先初始化对象然后弹window），再加上使用比较麻烦，所以采用html5的formdata对象+xmlhttprequest+input type = file实现上传
实现（设计思路）:

1. 关于全局对象:var multi = function(params){this.params = params;};multi.prototype.func1 = function(){};js中的构造模式加原型模式，原型共享方法，构造对象私有化，接收用户的参数，主要功能:1.（单个文件大小，文件类型，文件数量加上用户逻辑相关的参数），2.初始化上传对象，下文会讲到，3.一些公共的方法（比如获取元素样式，懒加载js或者css）4.提供给用户一些回调，用来调用上传过程中一些事件，比如上传完成给一个success的code等等
2. 关于上传对象:我的做法是先做一个input type = file以下都称为inputFile，然后隐藏（因为原生的这个东西太丑了），画一个div盖在上传按钮上（与按钮同级），点击div触发inputFile的click，监听inputFile的change事件来获取文件信息，这里我要说inputFile相当于是一个容器，存储每次用户选择的文件
3. 关于上面的div:比较疑惑的是在ie10中一定要给div填充颜色，才能触发onclick事件，div的宽高可以直接读取offsetHeight或者clientHeight，位置这里要详细说一下（这里用left举例），首先offsetParent是外层有定位的元素加上table和td，而div.style.left是相对于最内层有定位的元素，所以我们要找到最内层有定位的元素，并且找出这个元素和按钮之间所有的table和td，然后把按钮和table和td的offsetLeft相加赋给div的left就可以了
4. 在介绍上传队列之前，需要有一个进度条，个人比较推荐html5的progress对象
5. 上传队列:1.文件类型控制inputFile的accept，找对应的MIME TYPE解决就可以 2.文件大小单位是B，可以转换成TB,MB等等 3.我会为每个文件生成一个id，类似这样:H5UploadFile_ + 全局对象的index + 文件的index，来区别每个上传文件，然后给文件打上code，比如overSizeError，zeroSizeError，fileNormal，typeerror等等4.队列个数限制:总的思想是将inputFile中用户每次添加的文件放入到需要上传的队列中，举个例子:允许上传10个，已经上传成功了3个，然后队列中只能容纳7个正确文件，这里我做一个总的数组（10个文件信息，队列文件，错误文件，上传成功文件），队列中的文件数组（小于等于7，筛选用户添加的正确文件放入），每次添加的文件数组（用户添加先清空），队列中正确文件数量，所有正确文件的数量等等，我的原则是如果队列中正确的文件个数加上用户要添加的文件个数大于10，则弹出提示，你可以根据自己的需求设计（包括删除文件功能，文件队列和上传成功的文件）
6. 开始上传:这是ajax的send使用post能上传的数据

我使用的是formdata对象，为了实现让文件一个一个的上传，每次开始上传都会创建一个xhr（xmlhttprequest）对象，这是当时比较low的一个做法，可以尝试一下只new一个xhr对象，然后递归去调用上传方法，xhr提供了一些回调事件，我用的这几个，onreadystatechange，onerror，ontimeout，onprogress，基本已经够用

7. 后台:php后台，加header('Access-Control-Allow-Origin:*');实现跨域，可以把*换成你想要的域，原来的flash跨域使用的是xml文件，有兴趣的可以去看下，在php使用$_FILES接收所有文件信息，$_POST接收其他逻辑信息，对文件类型的判断，在库里记录文件信息，使用move_uploaded_file移动文件到服务器，并且更新文件服务器的容量
8. 获取所有元素的样式和div的位置

第一次发帖，希望大家多支持，有不明白和建议可以回复我