第一种: 传统的 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 版本;
来源: http://www.jianshu.com/p/fdeb8853430b