结合FormData

   <form id="myForm" class="form-horizontal" action="" method="post" enctype="multipart/form-data">
        <div class="form-group">
            <label for="inputTitle">优惠券标题</label>
            <input type="text" class="form-control" id="inputTitle" name="title" placeholder="输入优惠券标题">//name和value值组成键值对，post过去
        </div>
        <div class="form-group">
            <label for="inputCredits">所需积分</label>
            <input type="number" class="form-control" id="inputCredits" name="credits" required="required" min="0" max="100000000" step="1">
        </div>
        <div class="text-center btns-group">
            <button type="submit" id="buttonSubmit" class="btn btn-primary"><i class="glyphicon glyphicon-ok"></i> 确认添加</button>
        </div>
    </form>

XMLHttpRequest & FormData

   function sendData(){
        // HMLHttpRequest
        var XHR = new XMLHttpRequest();
        var FD = new FormData(form);
        var buttonSubmit = document.querySelector("#buttonSubmit");

        // 数据成功发送并返回后执行的操作
        XHR.addEventListener("load", function(event) {

            console.log(XHR.responseText); //返回json
            /**
            {
              "id": 96
            }
            **/
            var jsonParseJson = JSON.parse(event.target.responseText); // 解析 json

            // 根据json返回值进行的操作（成功添加/添加失败）
            if (jsonParseJson.id) {
                console.log(jsonParseJson.id);
                //96
                buttonSubmit.setAttribute("class", "btn btn-success");
                buttonSubmit.disabled = "disabled";
                buttonSubmit.innerHTML = '添加成功！';
                window.location.href = '/adm/get_coupon/' + jsonParseJson.id + '/'; // 页面跳转到返回的 id URL
            } else{
                console.log(jsonParseJson.error_msg);
                buttonSubmit.innerHTML = '<i class="glyphicon glyphicon-ok"></i> 确认添加';
                buttonSubmit.removeAttribute('disabled');
                alert('提交失败：' + jsonParseJson.error_msg);
            };
        });

        XHR.addEventListener("error", function(event) {
            alert('发生未知错误，请尝试重新提交');
        });
        XHR.open("POST", "/adm/add_coupon/");
        XHR.send(FD);
    }
    var form = document.getElementById("myForm");
    form.addEventListener("submit", function(event) {
        event.preventDefault();
        buttonSubmit.innerHTML = '正在添加..';
        buttonSubmit.disabled = "disabled";
        sendData();
    });

XMLHttpRequest

xhr.onreadystatechange = callback;//在readystatechange事件上绑定一个函数
//当接收到数据时,会调用readystatechange事件上的事件处理函数
xhr.send(FD);
functon callback() {
    if (xhr.readyState == 4) {//readyState等于4表示数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据
        alert(xhr.reponseText);//responseText属性用来取得返回的文本
    }
}

FormData

通常我们提交（使用submit button）时，会把form中的所有表格元素的name与value组成一个queryString，提交到后台。这用jQuery的方法来说，就是serialize。但当我们使用Ajax提交时，这过程就要变成人工的了。因此，FormData对象的出现可以减少我们一些工作量。

想得到一个FormData对象：

var formdata = new FormData();
W3c草案提供了三种方案来获取或修改FormData。

方案1：创建一个空的FormData对象，然后再用append方法逐个添加键值对：

var formdata = new FormData();
formdata.append("name", "呵呵");
formdata.append("url", "http://www.baidu.com/");
方案2：取得form元素对象，将它作为参数传入FormData对象中！

var formobj =  document.getElementById("form");
var formdata = new FormData(formobj);
方案3：利用form元素对象的getFormData方法生成它！

var formobj =  document.getElementById("form");
var formdata = formobj.getFormData()
利用Formdata对象，我们可以使用原生js通过ajax实现异步上传图片，当然，现在已经有jquery的批量上传插件了，实现原理就是利用了Formdata。