FormData方法介绍,h5图片上传简易版

By admin in 4858美高梅 on 2019年3月26日

一、选择图片(input的file类型)

1. 概述

FormData类型其实是在XMLHttpRequest
2级定义的,它是为类别化表以及开创与表单格式相同的数量(当然是用以XH昂科拉传输)提供方便。

1. 概述

FormData类型其实是在XMLHttpRequest
2级定义的,它是为连串化表以及开创与表单格式相同的数据(当然是用以XH昂Cora传输)提供便利。

HTML5可预览多图片ajax上传(使用formData传递数据)

<input type="file" id="inputImg">

4858美高梅,2. 构造函数

2. 构造函数

创制二个formData对象实例有两种方法

一 、创设二个空对象实例

var formData = new FormData();

此时能够调用append()方法来添加多少

二 、使用已有的表单来初叶化三个目的实例

若果将来页面已经有三个表单

<form id="myForm" action="" method="post">
    <input type="text" name="name">名字
    <input type="password" name="psw">密码
    <input type="submit" value="提交">
</form>

大家可以使用这几个表单元素作为开头化参数,来实例化一个formData对象

// 获取页面已有的一个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");

在介绍上传图片从前,我们差不多的来询问下FormData的着力使用;介绍成功后那几个基本知识后,大家会在篇章最终提供二个demo,正是ajax多图片上传前预览效果。

1.
input的file类型会渲染为二个按钮和一段文字。点击按钮可打开文件选用窗口;file类型的input会有files属性,保存着公文的相干新闻。

开创三个formData对象实例有两种艺术

3. 操作方法

先是,大家要旗帜分明formData里面储存的数目方式,一对key/value组成一条数据,key是绝无仅有的,八个key也许对应八个value。假如是选取表单伊始化,每二个表单字段对应一条数据,它们的HTML
name属性即为key值,它们value属性对应value值。

4858美高梅 1

1. formData的中坚的用法:
首先成立三个 空对象实例 代码如下:
var formData = new FormData();

2.
input.files是三个数组,由传入的file对象组成。每一个file对象涵盖以下属性:

壹 、创立二个空对象实例 FormData类型其实是在XMLHttpRequest 2级定义的,它是为系列化表以及开创与表单格式相同的多寡(当然是用来XHTiguan传输)提供便宜。
var formData = new FormData();

那时候得以调用append()方法来添加多少

3.1 获取值

FormData方法介绍,h5图片上传简易版。咱俩能够通过get(key)/getAll(key)来获取相应的value,

formData.get("name"); // 获取key为name的第一个值
formData.get("name"); // 返回一个数组,获取key为name的所有值

1-1 获取值
因而get(key)/getAll(key)来取得相应的value;比如:

4858美高梅 2

2.应用已有个别表单来早先化2个对象实例

3.2 添加多少

咱俩得以因而append(key,
value)来添加多少,借使钦命的key不设有则会新增一条数据,假如key存在,则添加到数据的终极

formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k1", "v1");

formData.get("k1"); // "v1"
formData.getAll("k1"); // ["v1","v2","v1"]
formData.get("name"); // 获取key为name的第一个值。
formData.getAll("name"); // 返回一个数组,获取key为name的所有值。

lastModified:数值,表示近年来一次修改时间的阿秒数;

如若未来页面已经有3个表单
<form id="myForm" action="" method="post">
    <input type="text" name="name">名字
    <input type="password" name="psw">密码
    <input type="submit" value="提交">
</form>

3.3 设置修改数据

大家得以经过set(key,
value)来设置修改数据,假如内定的key不存在则会新增一条,要是存在,则会修改对应的value值。

formData.append("k1", "v1");
formData.set("k1", "1");
formData.getAll("k1"); // ["1"]

诸如如下HTML代码:

lastModifiedDate:对象,表示最后1遍修改时间的Date对象(高程中说是字符串,依据上海体育地方可观看应该为对象,为了层级鲜明未对其进展,我们可机关查看,其可调用Date对象的关于办法,例如getDay方法);

大家能够利用那几个表单成分作为伊始化参数,来实例化一个formData对象
// 获取页面已有的一个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");

3.4 判断是不是该数额

咱俩得以因此has(key)来判断是不是相应的key值

formData.append("k1", "v1");
formData.append("k2",null);

formData.has("k1"); // true
formData.has("k2"); // true
formData.has("k3"); // false
<!DOCTYPE html>
 <html>
    <head>
        <meta charset="utf-8">
        <title>标题</title>
    </head>
    <body>
      <form id="myForm">
        <input type="text" name="name" placeholder="请输入你的名字" />
        <input type="password" name="password" placeholder="请输入你的密码" />

        <input type="text" name="n1" />
        <input type="text" name="n1" />

        <input type="submit" id="submitId" value="提交" />
      </form>
      <script>
        // 表单初始化
        var form = document.getElementById('myForm');
        var submitId = document.getElementById("submitId");
        submitId.addEventListener('click', function(e){
          e.preventDefault();
          var formData = new FormData(form);
          // 获取名字
          var name = formData.get("name");
          var psw = formData.get("password");
          console.log(name);  
          console.log(psw);

          // 使用getAll 获取name为n1的所有值
          var arrs = formData.getAll("n1");
          console.log(arrs);  // 返回一个数组 

        }, false);

      </script>
    </body>
</html>

name:本半夏件系统中的文件名;

3. 操作方法

先是,大家要明显formData里面储存的多少格局,一对key/value组成一条数据,key是绝无仅有的,3个key大概对应三个value。借使是使用表单初叶化,每二个表单字段对应一条数据,它们的HTML
name属性即为key值,它们value属性对应value值。

key value
k1 [v1,v2,v3]
k2 v4

3.5 删除数据

通过delete(key),来删除数据

formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k1", "v1");
formData.delete("k1");

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

1-2 添加多少
能够经过append(key,
value)来添加多少,如若钦定的key不设有则会新增一条数据,若是key存在,则添加到数据的末尾。

size:文件的字节大小;

3.1 获取值

大家得以经过get(key)/getAll(key)来博取相应的value,

formData.get("name"); // 获取key为name的第一个值
formData.get("name"); // 返回一个数组,获取key为name的所有值

3.6 遍历

大家可以经过entries()来得到三个迭代器,然后遍历全体的数码,

formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k2", "v1");

var i = formData.entries();

i.next(); // {done:false, value:["k1", "v1"]}
i.next(); // {done:fase, value:["k1", "v2"]}
i.next(); // {done:fase, value:["k2", "v1"]}
i.next(); // {done:true, value:undefined}

可以看来再次来到迭代器的平整

  1. 每调用2遍next()重临一条数据,数据的逐条由添加的依次决定

  2. 回到的是二个指标,当其done属性为true时,表达已经遍历完全部的多寡,这些也得以看做判断的依据

  3. 再次回到的目的的value属性以数组格局储存了一对key/value,数组下标0为key,下标1为value,借使一个key值对应四个value,会变成多对key/value重临

大家也能够透过values()方法只获得value值

formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k2", "v1");

var i = formData.entries();

i.next(); // {done:false, value:"v1"}
i.next(); // {done:fase, value:"v2"}
i.next(); // {done:fase, value:"v1"}
i.next(); // {done:true, value:undefined}
var formData = new FormData();
formData.append('name', 'kongzhi1');
formData.append('name', 'kongzhi2');
formData.append('name', 'kongzhi3');

console.log(formData.get('name')); // kongzhi1
console.log(formData.getAll('name')); // ["kongzhi1", "kongzhi2", "kongzhi3"]

type:字符串,文件的MIME类型;

3.2 添加多少

咱俩得以由此append(key,
value)来添加多少,假使内定的key不存在则会新增一条数据,假诺key存在,则添加到数据的终极

formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k1", "v1");

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

4. 发送数据

大家得以经过xhr来发送数据

var xhr = new XMLHttpRequest();
xhr.open("post","login");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(formData);

那种形式得以来促成公文的异步上传。

 

转自:

1-3 设置修改数据
能够经过 set(key,
value)来设置修改数据,即使钦点的key不存在则会新增一条,若是存在,则会修改对应的值。

weblitRelativePath:此处为空;当在input上丰富webkitdirectory属性时,用户可挑选文件夹,此时weblitRelativePath表示文件夹汉语件的相对路径。比如:

3.3 设置修改数据

作者们得以因而set(key,
value)来设置修改数据,如若钦命的key不存在则会新增一条,倘若存在,则会修改对应的value值。

formData.append("k1", "v1");
formData.set("k1", "1");
formData.getAll("k1"); // ["1"]
var formData = new FormData();
formData.append("name", 'kongzhi1');
console.log(formData.getAll("name")); // ["kongzhi1"]

formData.set("name", 'kongzhi2');
console.log(formData.getAll("name")); // ["kongzhi2"]

二、读取图片数据 (FileReader对象)

3.4 判断是还是不是该数量

我们能够透过has(key)来判断是不是对应的key值

formData.append("k1", "v1");
formData.append("k2",null);

formData.has("k1"); // true
formData.has("k2"); // true
formData.has("k3"); // false

1-4 判断是还是不是留存该数额
咱俩得以由此has(key) 来判断是不是有对应的key值。

FileReader 
对象是一种异步文件读取机制,使用 File或
Blob对象钦定要读取的文书或数额,结合input:file能够很便利的读取本羊眼半夏件。

3.5 删除数据

透过delete(key),来删除数据

formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k1", "v1");
formData.delete("k1");

formData.getAll("k1"); // []
var formData = new FormData();
formData.append("name", 'kongzhi1');
formData.append("name2", null);

console.log(formData.has("name")); // true
console.log(formData.has("name2")); // true
console.log(formData.has("name3")); // false
var reader = new FileReader();//创建一个FileReader实例
reader.readAsDataURL(file);//调用fileReader对象的方法,将文件读取为DataURL
reader.onload = function(){//处理事件
  console.log(this.result);//读取完成后,数据保存在对象的result属性中,打印结果如下:(截取部分结果)
}
3.6 遍历

大家能够经过entries()来获取1个迭代器,然后遍历全数的多寡,

formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k2", "v1");
var i = formData.entries();
i.next(); // {done:false, value:["k1", "v1"]}
i.next(); // {done:fase, value:["k1", "v2"]}
i.next(); // {done:fase, value:["k2", "v1"]}
i.next(); // {done:true, value:undefined}

可以观察重临迭代器的平整

每调用贰次next()重返一条数据,数据的依次由添加的依次决定
再次回到的是1个对象,当其done属性为true时,表达已经遍历完全部的数码,那一个也得以用作判断的依照
归来的目的的value属性以数组格局储存了一对key/value,数组下标0为key,下标1为value,如若几个key值对应六个value,会变成多对key/value重临
我们也可以由此values()方法只收获value值

formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k2", "v1");

var i = formData.entries();

i.next(); // {done:false, value:"v1"}
i.next(); // {done:fase, value:"v2"}
i.next(); // {done:fase, value:"v1"}
i.next(); // {done:true, value:undefined}

1-5 删除数据
由此delete(key), 来删除数据。

4858美高梅 3

4. 发送数据

小编们能够透过xhr来发送数据

var xhr = new XMLHttpRequest();
xhr.open("post","login");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(formData);

那种办法能够来兑现公文的异步上传。

var formData = new FormData();
formData.append("name", "kongzhi1");
formData.append("name", "kongzhi2");

console.log(formData.getAll("name")); // ["kongzhi1", "kongzhi2"]

formData.delete("name");
console.log(formData.getAll("name")); // []

三 、上传图片   ( formData对象 )

自己的博客链接

越多财富就在笔者的gitHub:https://github.com/huzixian2017/huzixian2017.github.io

二:使用XMLHttpRequest formData上传文件
XMLHttpRequest2
定义了FormData类型,FormData为连串化表单以及开创与表单格式相同的数据(用于通过xhr数据传输)提供了有利。
浏览器扶助:IE9及IE9-不接济。

1.
用一些键值对来效仿一层层表单控件,以key与value格局组装成三个指标,FormData对象的操作方法,全体在原型中,本身我没任何的质量及形式。

原审XMLHttpRequest提交formData数据如下demo:

  1. 异步上传二进制文件。
<!DOCTYPE html>
 <html>
    <head>
        <meta charset="utf-8">
        <title>标题</title>
    </head>
    <body>
      <form name='form1' id='form1'>
        <input type='file' name='imgFile' />
        <input type='text' name='name1' />
        <input type='text' name='name2' />

        <div id="uploadImg">上传图片</div>
      </form>
      <script>
        var form1 = document.getElementById("form1");
        var uploadImg = document.getElementById("uploadImg");
        var xml = new XMLHttpRequest();

        uploadImg.addEventListener('click', function(e){
          e.preventDefault();
          var formData = new FormData(form1);
          xml.open("POST", url, true);
          xml.send(forData);
        });
      </script>
    </body>
</html>

3.
属性不是向来挂载在您那几个FormData实例上。能够通过它提供的迭代器,恐怕get方法去取值。

2-2 使用jquery ajax方式来上传formData数据如下:

var formData=new FormData();//创建一个空对象实例
formData.append('key',value);//向该对象添加字段
console.log(formData.get("key")); // 打印key值对应的value值

HTML代码如下:

4858美高梅 4

<div id="container">
  <a href="javascript:void(0)" class="file">选择文件
     <input type='file' id="file" multiple accept = 'image/gif,image/jpeg,image/jpg,image/png' />
     <input type="hidden" />
   </a>
</div>
  1. formData操作

javascript 代码如下:

(1)获取值:通过formData.get(key)/getAll(key)来收获相应的value

var formdata = new FormData();
// 上传到服务器的字段名称
formdata.append("imgFile", $('#file')[0].files[0]);
$.ajax({
  url: self.url,
  type: 'POST',
  cache: false,
  data: formdata,
  timeout: 5000,
  //必须false才会避开jQuery对 formdata 的默认处理 
  // XMLHttpRequest会对 formdata 进行正确的处理
  processData: false,
  //必须false才会自动加上正确的Content-Type 
  contentType: false,
  xhrFields: {
    withCredentials: true
  },
  success: function(data) {

  },
  error: function(XMLHttpRequest, textStatus, errorThrown) {

  }

(2)添加多少:通过formData.append(key,
value)来添加多少,倘若钦赐的key不设有则会新增一条数据,如若key存在,则添加到数据的末梢

如上参数设置含义如下:
1. processData: false,
因为data值是formdata对象,不供给对数码做拍卖。
2. cache: false, 上传文件不要求缓存。
3. contentType: false,
因为是由<form>表单构造的FormData对象,且已经宣称了属性enctype=”multipart/form-data”,所以那边设置为false。
4. xhrFields: { withCredentials: true }, 跨域请求设置

(3)修改数据:通过formData.set(key,
value)来设置修改数据,假若内定的key不存在则会新增一条,就算存在,则会修改对应的value值

下边是2个 使用 ajax中的formData 多张图纸上传前预览效果的二个demo。

(4)判断是不是该数量:通过formData.has(key)来判定是还是不是对应的key值

formData
对ajax多张图片上传前预览效果如下

(5)删除数据:通过formData.delete(key),来删除数据

查看效果

(6)遍历数据:通过formData.entries()来获取二个迭代器,然后遍历全体的多少

API使用办法及github上的源码

(7)发送数据:ajax异步请求

肆 、jQuery上传图片代码

var formdata;
if (typeof FileReader === 'undefined') {//检测浏览器对FileReader兼容性
        showimg.innerHTML = "抱歉,你的浏览器不支持 FileReader";
        imginput.setAttribute('disabled', 'disabled');
} 
else {
    imginput.addEventListener('change', function() {
        var file = this.files[0];
        console.log(file);
        if (!/image\/\w+/.test(file.type)) {
            alert("请确保文件为图像类型");
            return false;
        }
        var reader = new FileReader();//创建一个FileReader实例
       reader.readAsDataURL(file);//将文件内容进行base64编码后输出
       //console.log(reader) 
       reader.onload = function(e) {
           //console.log(this.result);//读取完成后,数据保存在对象的result属性中 
          $(showimg).append('<img src="' + this.result + '" alt="4858美高梅 5"/>');//将选中的图片显示在页面上 //alert('111');  
           formData=new FormData(); 
          formData.append('file',file); 
          console.log(formData.getAll('file')); 
       } 
   }, false); 
}
$.ajax({
    url : url,
    type : 'post',
    dataType:"json", 
    data:formData,
    cache: false,
    processData : false,// 告诉jQuery不要去处理发送的数据 
    contentType : false,// 告诉jQuery不要去设置Content-Type请求头
    success : function(data, status, xhr) {
        //alert(1);
    },
    error : function(xhr, errorType, error) {
        //alert(0);
    }
});

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有