Learn formData class to upload files

FormData The interface provides a  key/value way to construct key-value pairs that represent form data, and the data can be easily sent through the XMLHttpRequest.send()  method. Both this interface and this method are quite simple and straightforward. If the encoding type is set to when sending  "multipart/form-data", it will use the same format as the form

formData object

1.创建一个空对象
var formdata=new FormData()

2.追加数据
formdata.append("name","张三";)

3.通过get方法对值进行读取
console.log(formata.get("name"));

4.通过set方法对值进行修改,如果key值不存在,则添加一条数据
var formdata=new FormData();
formdata.set("name","张三");
console.log(formata.get("name"));//张三
//has(key) 判断是否存在对应的key值

var formdata=new FormData( );
formdata. append( "name","李四”);
console.1og( formdata. has("name")); // true
console . log(formdata.has("age")); // false

//delete(key)删除数据

formdata. append("name", "李四");
console .1og( formdata. get("name")); //李四
formdata. delete(" name");
console.1og( formdata. get("name")); // null

//entries()获取一个迭代器,然后遍历所有的数据

 var formData = new FormData( );
 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()返回一条数据,数据的顺序根据添加的顺序决定

//返回的是一个对象,当done的属性为 true的时候,就说明已经遍历完毕

Links to specific studies are as follows:

Formdata file upload-Nuggets

review

1. Function

函数的声明
var fun=function(){}
Function ()构造函数
var fun=new Function("a","b","return a*b")

函数的提升
也就是说提升是js默认将当前作用域提升到前面的去的行为

自调用函数

如果表达式后面紧跟(),则他自己会自调用
(funciton (){
 var x="Hello!";//我将调用我自己
 //这是一个匿名函数的调用
})

函数是对象
在Js当中使用typeof操作符判断函数类型将返回"function"
但是 js函数描述未一个对象更加准确
js函数有属性和方法
arguments.length会返回函数调用过程种接收到的参数的个数
function muFunction(a,b){
 return argumnets.length;
}

toString()方法 会将函数作为一个字符串返回
function myFunction(a,b){
return a*b;
}

var txt=myFunction .toString();

箭头函数
(参数1,参数2 ,参数3,参数 n)=>{ return 表达式 ;}

//当只有一个参数的时候,圆括号是可选的
(单一参数)=>{函数声明}
单一参数 =>{函数声明}

//没有参数的函数应该写成一对圆括号
()=>{函数声明}
对比
var x=function(x,y){
return x*y;
}

const x=(x,y)=>x*y;
箭头函数没有自己的this,不适合一个对象的方法
当我们使用箭头函数的时候,箭头函数会默认帮我们绑定外层this的值,所以在箭头函数
种this的值和外层的this是一样的
箭头函数不能提升,所以在使用之前需要定义

使用const 比使用var更加安全,因为函数表达式始终是一个常量



2. Several common ways to create objects

var p=new Object ();
p.name='Tom'
p.age=12
p.setName=function(name){
 this.name=name
}

//Test
p.setName('JACK')
console.log(p.name,p.age)
//Method 2:
Use object literal mode
Routine: Use {} to create an object and specify attributes/methods
Usage scenario: The internal data of the original object is certain.
Problem: If you create multiple objects, there will be duplicate code.

var p={
 name:'Tom',
 age:12,
 setName:function(name){
  this.name=name
 }
}

//Test
console.log(p.name,p.age)
p.setName('JACK')

//Method 3: Factory mode
Use factory functions to create dynamic objects and return them
. Common usage: Need to create; multiple objects.
Problem: Objects do not have a specific value, they are all Object values.

function Person(name,age){
this.name=name;
this.age=age
}

Person.prototype.setName=function(name){  this.name=name;//Instance object }


 


Summary of this week: Keep up the good work! 

Guess you like

Origin blog.csdn.net/www340300/article/details/131036660