AJAX大文件上传

1. 关于form表单上传文件

 <form action="上传的地址" method="post">
    <input type="text"  />
    <input type="file" />
  </form>

这样子上传文件会失败，为什么会失败？
因为在post提交数据之前，表单会寻找input的文本数据，当找不到时，就只能找到相应的文本标识，当前上传文件的标识就是文件名，而form的enctype属性，默认为application/x-www-form-urlencoded，所以最后发送到服务端的是 name=‘joy’&file='filename’这种形式，因此导致上传失败
enctype：规定在发送到服务器之前应该如何对表单进行编码，默认地，表单数据会编码为 “application/x-www-form-urlencoded”。就是说，在发送到服务器之前，所有字符都会进行编码（空格转换为 “+” 加号，特殊符号转换为 ASCII HEX 值）。
enctype="multipart/form-data"会将文件类型转为二进制数据
3. form表单上传文件是同步的
input标签的type属性为file，默认只能上传一个文件，设置multiple属性，可以上传多个文件，并在name属性中添加[]告诉后端上传的是一个数组

<form action="" method="post">
	<input type="file" name="files[]" multiple /><br />
	<input type="submit" value="上传" />
</form>

4. 关于异步上传文件

3.1. FormData()表单数据构造函数
new FormData()会实例化一个表单对象，它提供了使用键值对表示表单的方式，并能通过new XMLHTTPRequest.send()方法发送出去，如果发送时的编码类型被设为’multipart/form-data’,它将会使用和表单一样的格式,使用submit（）发送数据，但是独立于表单使用
创建formData并添加数据

var formData = new formData();
formData.append('usename','haha');
formData.append("account", 123456); //数字 123456 会被立即转换成字符串 "123456"
// HTML 文件类型 input，由用户选择
formData.append("userfile", fileInputElement.files[0]);

构建包含form表单数据的FormData对象,

var form = document.querySelector("form");
var formData = new FormData(form);
formData.append('name', 'joy);
  new  XMLHttpRequest().send(formData);            

formData获取值通过forData.get(‘键名’);设置值通过formData.set(‘key’，‘value’);判断是否有某个值formData.has(‘key’),返回Boolean；formData.delete(‘key’)，删除字段后，forData.get(‘键名’)得到的值是null；这些方法都在formData.prototype上
5. 文件异步上传的方式
5.1. 不使用form表单，通过formData异步上传
不使用form表单直接写input通过formData表单数据构造函数来实例化一个对象，进行文件异步上传
通过input的onchange事件，绑定事件处理函数，获取到上传的文件的类数组，通过循环判断每一个文件的大小是否超出，并做相应的提示，符合要求的文件通过创建formData对象上传，在Ajax的对象中，通过upload.onrogress方法获取文件上传的进度（e.loaded,e.total）设置进度条

<input type="file" id="file" multiple/>
<script>
    var file = document.getElementById('file'),
      	maxSize = 32212247;
    file.onchange = function(){
      var files = this.files;//获取上传的文件对象，通过判断length可以对上传的文件个数进行限制
      console.log(this.files[0] > 1);
      for(var i = 0; i < files.length; i++) {
        fileSize = files[i].size;
		// 判断被选中的文件名称以及大小是否合法
    		if(/\.(jpg|png|gif|jpeg)$/g.test(fileName)){
    			info = `${fileName}文件不是图片类型`;
    		}
    		if(fileSize > maxSize) {
    			info = '文件过大';
    		}
        if(info !== ''){
          console.log(info);
        } else {
          fd = new FormData();
					fd.append('file', files[i]);
    			// 发起AJAX请求
    			var o = window.XMLHttpRequest ?
    						new XMLHttpRequest() :
    						new ActiveXObject('Microsoft.XMLHTTP');
      			if(!o) {
      				throw new Error('您的浏览器不支持AJAX异步发起HTTP请求');
      			}
					o.open('post', '文件上传地址');
          (function(j){
                  o.uploa.onprogress = function(ev){
                    var e = ev || window.event;
                    //设置进度条
                    ....
                  }
          })(i)
     }
    }
  </script>