欢迎光临
这是我的个人博客

JQ之FormData用法详解

我们在使用JQ进行AJAX上传图片和数据一起提交的时候就会用到这个方法,今天在这里介绍一下怎样使用这个方法。

FormData 对象:
formdata

一.创建一个formData对象实例的方式

1、创建一个空对象

var formData = new FormData();//通过append方法添加数据1

2、使用已有表单来初始化对象

//表单示例<form id="myForm" action="" method="post">
    <input type="text" name="name">名字
    <input type="password" name="psw">密码
    <input type="submit" value="提交">
</form>//方法示例// 获取页面已有的一个form表单var form = document.getElementById("myForm");// 用表单来初始化var formData = new FormData(form);// 我们可以根据name来访问表单中的字段var name = formData.get("name"); // 获取名字var psw = formData.get("psw"); // 获取密码// 当然也可以在此基础上,添加其他数据formData.append("token","kshdfiwi3rh");1234567891011121314151617

二. 操作方法

formData里面存储的数据是以健值对的形式存在的,key是唯一的,一个key可能对应多个value。
如果是使用表单初始化,每一个表单字段对应一条数据,它们的HTML name属性即为key值,它们value属性对应value值。
1.获取值

//通过get(key)/getAll(key)来获取对应的valueformData.get("name"); // 获取key为name的第一个值formData.get("name"); // 返回一个数组,获取key为name的所有值123

2 添加数据

//通过append(key, value)来添加数据,如果指定的key不存在则会新增一条数据,如果key存在,则添加到数据的末尾formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k1", "v3");1234

获取值时方式及结果如下

formData.get("k1"); // "v1"formData.getAll("k1"); // ["v1","v2","v3"]12

3.设置修改数据

//set(key, value)来设置修改数据,如果指定的key不存在则会新增一条,如果存在,则会修改对应的value值
formData.append("k1", "v1");formData.set("k1", "1");formData.getAll("k1"); // ["1"]1234

4.判断是否存在对应数据

//has(key)来判断是否对应的key值formData.append("k1", "v1");
formData.append("k2",null);

formData.has("k1"); // trueformData.has("k2"); // trueformData.has("k3"); // false1234567

5.删除数据

//delete(key)删除数据formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k1", "v1");
formData.delete("k1");

formData.getAll("k1"); // []1234567

三.JQuery实例

//添加数据方式见上二。//processData: false, contentType: false,多用来处理异步上传二进制文件。
 $.ajax({
    url: 'xxx',    type: 'POST',    data: formData,                    // 上传formdata封装的数据
    dataType: 'JSON',    cache: false,                      // 不缓存
    processData: false,                // 
    contentType: false,                // 
    success:function (data) {           //成功回调
        console.log(data);
    }
});1234567891011121314

附:

/**
 * 将以base64的图片url数据转换为Blob文件格式
 * @param urlData 用url方式表示的base64图片
 */function convertBase64UrlToBlob(urlData) {   
  var bytes = window.atob(urlData.split(',')[1]); 
  //去掉url的头,并转换为byte    //处理异常,将ascii码小于0的转换为大于0    
  var ab = new ArrayBuffer(bytes.length);
      var ia = new Uint8Array(ab);    
      for(var i = 0; i < bytes.length; i++) {
        ia[i] = bytes.charCodeAt(i);
    }    return new Blob([ab], {type: 'image/png'
    });
}

赞(1) 打赏
未经允许不得转载:好好网 » JQ之FormData用法详解

相关推荐

  • 暂无文章

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏