目录

一、表单概念

1.表单

2.提交的两种方式

二、form-serize与FormData

1.form-serize

2.FormData

三、文件上传案例分析

---

以下的既为本文的核心概括

一、表单概念

1.表单

form标签（表单）是用来收集用户输入的信息。

表单构成：

• 表单标签： form
• 表单域: input, checkbox, select ...
• 表单按钮 <button type="submit"></button>

2.提交的两种方式

1. 表单自我提交

  // 其他元素

注意点：该提交方法会提交到指定地址并且会刷新整个网页的。靠的是method和action这两个属性

2.表单Ajax提交（案例参考下面的例子form-serize）

表单的默认提交效果不好（有页面刷新），我们直接用ajax的方式来提交。

要点：

1. 给按钮添加点击事件的回调。
2. 在回调函数中发请求

使用该方法不会存在整个页面提交的情况。

二、form-serize与FormData

1.form-serize

概念：能使用form-serialize插件, 提取整个表单数据

    
    
    
    
    
    
    
          
	      
	



    

        

            
            用户名：
            
        
        

            
            登录密码：
            
        
        

            
            提交
        
    

    
    
    

格式 ：

• 格式1： serialize(form标签) 返回值是：查询字符串的格式
• 格式2： serialize(form标签, { hash: true }) 返回值是： json对象

格式1： serialize(form标签)

格式2： serialize(form标签, { hash: true })

---

2.FormData

以键值对形式存放数据的容器, 常用于 装载文件对象

FormData如何使用?（例子参考文件上传案例）

实例化一个对象，用它的append方法加入参数名和值

三、文件上传案例分析

整体思路是：

1.获取上传文件按钮

2.注册点击事件与改变事件

3.创建FormData容器

4.用Ajax获取的图片送到到服务器中

5.之后执行then操作获取成功之后：将图片的src值重新获取过来渲染到页面上

    
    
    
    
    
    
    
          
	      
	
    
    



    
 
        
        

        
        

            文件上传
            
        
    
    
    

注意点：

file文件可以存的文件不限于是img,FormData中存放的是文件的位置（图片），之后通过data传递到服务器上去。

传上去之后，正确了才会走then的操作，将数据与图片的src进行更换

（log打印的是文件/图片的存储位置）