JavaScript表单上传（包含文件上传）三个方法

参考地址：
form表单上传附件的几种方法
form上传文件2种方式

1.使用form表单提交

form使用属性enctype="multipart/form-data";

<form action="请求地址" method="请求类型" enctype="multipart/form-data">
    <input type="file" name="">
    <input type="text" name="">
    <input type="submit" value="提交">
</form>

使用FormData对象

XMLHttpRequest Level 2添加了一个新的接口FormData，利用FormData对象，我们可以使用XMLHttpRequest的send()方法异步的提交数据，比起普通的ajax，使用FormData的最大优点是可以异步上传一个二进制文件。

 var a = new FormData();
    //使用append方法向空的FormData对象添加字段
    a.append('username','Jack');  
    a.append('age',17); //数字会被转换成字符串  
    a.append('userfile',files); //上传文件  
    a.append('webmasterfile',oBlob);    //二进制对象  
    var oReq = new XMLHttpRequest();  
    oReq.open('POST','submitform.php');  
    oReq.send(a);  
    //注意：值可以为Blob对象，File对象或者字符串，其它类型的值都会被自动转换为字符串处理  
    //
    //

    //使用HTML表单来初始化一个FormData对象
    var a = document.getElementById("form");
    var oReq = new XMLHttpRequest();
    oReq.open('POST','submitform.php');  
    oReq.send(a);  



    //使用FormData异步上传用户所选择的文件
    function sendForm(){
         var txt = document.getElementById('txt');  
         var a = new FormData(document.getElementById('file'));  
        var oReq = new XMLHttpRequest();  
        oReq.open('POST','submitform.php',true);  
        oReq.onload = function(oEvent){  
            if(oReq.status == 200){  
                txt.innerHTML = 'Uploaded!';  
            }else{  
                txt.innerHTML = 'Error' + oReq.status;  
            }  
        }  
        oReq.send(a);  
    }


    //
    //使用jQuery来发送FormData，但必须要正确的设置相关选项  
    var a = new FormData(document.getElementById('file'));  
    $.ajax({
        url:'submitform.php',
        type:'POST',
        data:a,
        processData:false,//告诉jQuery不要去出去发送的数据
        contentType:false//告诉jQuery不要去设置content-type请求头
    })

3.使用jquery.form.js插件

// ajaxSubmit提交form表单
  function updateUserInfo() {
    $('#表单ID').ajaxSubmit({
      url: url,
      type: 'POST',
      //data: $('表单ID').serialize(),
      //processData: false,
      //contentType: false,
      xhrFields: {
        withCredentials: true
      },
      crossDomain: true,
      success: function (obj) {
        // ...
      },
      error: function (obj) {
        // alert('服务器请求失败');
      }
    });
  }