第一种： 传统的from 和input 上传

1.使用input选择文件，设置好其他input的值，点击提交，将文件数据及签名等认证信息发送到form设置的action对应的页面，浏览器也会跳转到该页面。

<form action='https://www.baidu.com/' enctype="multipart/form-data" type='post'>
　　<input type='file'>
　　<input type='hidden' name='userid1' value="1">
　　<input type='hidden' name='userid2' value="2">
    <input type='hidden' name='userid3' value="3">
    <input type='submit'>
</form>

触发form表单提交可以用 <button>按钮，type='submit' 按钮，以及js的 form.submit() 方法；

优点：

1.兼容性好，基本上所有浏览器都支持；

缺点：

1.提交数据后页面会跳转；
2.因为是页面跳转，不是一个ajax提交，所以前端无法知道什么时候上传结束；

第二种： fromData上传

使用方法：

//先在页面上添加一个input控件
<input type="file" class="file" onchange="fn_upload()">

//定义方法
function fn_upload(){
    let formData = new FormData()
    let userfile = document.querySelector('input[type=file]').files[0]
  //添加健值    
    formData.append('file', userfile) //'file' 这个名字要和后台获取文件的名字一样;
//提交
    $.ajax({
       type : "post",
       url  : "www.baidu.com/imgupload",
       data : formData,
       headers:{
        "Content-Type":"multipart/form-data"
       },
       cache: false,
       processData:false,
       contentType:false,
        success:function(data){
             console.log("上传成功！")
        }
    })
}

优点：

1.因为是ajax上传，可以接收接口的返回数据， 准确了解到上传情况；

缺点：

1.兼容性差 但最低兼容IE10版本；