java前端js之formData的使用方法

1.formData 的功能

     1.1通过name-value的键值对形式，实现动态的form表单数据的序列化。

     1.2 异步上传部分表单信息与文件信息，即不是与表单所有的信息一起提交传入后台，可以是部分表单信息与文件先提交后台，把提交后反馈的信息与剩余表单信息再同步提交，最终实现文件与部分表单信息的异步上传。

2.formData的使用方法

     2.1 创建formData对象

      

    //创建空对象
    var formData=new FormData();
    //通过append()方法追加数据
    formData.append("name","ceshi");
    formData.append("name","lili");
    //123会转化为"123"
    formData.append("number",123);
    //追加文件信息
    formData.append("file",userfile.files[0])
    var fileLikeObject='<button id="reBack" class="btn" type="button">\n' +
            '                        <i class="icon-undo bigger-110"></i>\n' +
            '                        关闭\n' +
            '                    </button>';
    var blob = new Blob([fileLikeObject], { type: "text/xml"});
    //追加文件类型的对象
    formData.append("fileLikeObject",blob);
    //获取某个name下的value
    console.log(formData.get("name"));
    //重新设置某个name的value
    formData.set("name","test");
    //通过表单元素对formData进行初始化
    var form=document.querySelector("#testDiv")
    var formData=new FormData(form);
    //获取某个key下的所有value
    console.log(formData.getAll("name"));
    //判断是否包含某个key
    formData.has("name");
    //删除某个key
    form.delete("name");

3.formData发送数据的方法

   3.1通过XMLHttpRequest发送

   //发送formData数据
    var request=new XMLHttpRequest();
    request.open("post","http://127.0.0.1/test");
    request.send(formData);
    request.onload=function () {
        if(request.status==200){
            //成功
        }else{
            //失败
        }

    }

   3.2 通过ajax异步发送

function uploadFile(){
        var form=document.querySelector("#testDiv")
        var formData=new FormData(form);
        formData.append("name","zhangSan");
        jQuery.ajax({
              url:"http://127.0.0.1/uploadFile",
              type:"post",
              data:formData,
              //必须false才会自动加上正确的Content-Type
              contentType: false,
              /**
               * 必须false才会避开jQuery对 formdata 的默认处理
               * XMLHttpRequest会对 formdata 进行正确的处理
              */
              processData: false,
              dataType:"json",
              success:function(data){
                  if(data.success){
                      //成功操作
                  }else{
                      //失败操作
                  }
              },
              error:function(XMLHttpRequest,textStatus, errorThrown){
                 alert('服务器正忙，请稍后再试');
              }
        });
    }