知识点普及
FormData
- 用来添加数据，可以是字符串、Blod文件流、File文件流
formData.append('a', 1)意为添加一个键值对，重复添加的键不会被覆盖，formData.set('a', 1)意为修改某个键的值，如果不存在则作用等同于append，但是重复添加的值会相互覆盖
let formData = new FormData()
formData.append('a', 1)
formData.append('a', 2)
formData.set('b', 3)
formData.set('b', 4)
console.log(formData.get('a'), formData.getAll('a'))// 1 ["1", "2"]
console.log(formData.get('b'), formData.getAll('b'))// 4 ["4"]Ajax
- Ajax的全称：Asynchronous JavaScript and XML
- Ajax和XMLHttpRequest的区别和联系：ajax是一种技术方案，其底层需要依赖浏览器提供的XMLHttpRequest对象，进行发送http请求
源码示例
<!doctype html>
<html>
<head>
<title>测试</title>
<meta charset="utf8">
<script src="../js/jquery-1.11.3.min.js"></script>
</head>
<body>
<form id="form">
<input name="file" type="file" />
<input name="a" value="1" />
<input value="2" />
</form>
<button>提交</button>
</body>
</html>
<script>
$(function() {
// 监听上传进度
var xhrOnProgress = function(fun) {
xhrOnProgress.onprogress = fun; //绑定监听
return function() {
//通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
var xhr = $.ajaxSettings.xhr();
//判断监听函数是否为函数
if (typeof xhrOnProgress.onprogress !== 'function')
return xhr;
//如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
if (xhrOnProgress.onprogress && xhr.upload) {
xhr.upload.onprogress = xhrOnProgress.onprogress;
}
return xhr;
}
}
$('button').on('click', function() {
var formData = new FormData($('#form')[0]);// 自动搜索表单信息(表单内没有name属性的input不会被搜索到)，IE<=9不支持FormData
formData.append('b', 3);// 还可以添加额外的表单数据
$.ajax({
type: 'post',
url: '../../../material/jQueryFileUpload?type=1',
data: formData,
contentType: false,// 当有文件要上传时，此项是必须的，否则后台无法识别文件流的起始位置(详见：#1)
processData: false,// 是否序列化data属性，默认true(注意：false时type必须是post，详见：#2)
xhr: xhrOnProgress(function(e){// (详见：#3)
var percent=e.loaded / e.total;//计算百分比
$('body').append('->'+ percent);
}),
success: function(data) {
$('body').append('完成');
}
})
})
})
</script>xhr常用代码
var xhr = new XMLHttpRequest()
xhr.addEventListener('readystatechange', function() {
if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
// 回调
}
})
xhr.open('get', '/test')
xhr.send()参考文章
[#1] 浅谈contentType = false
[#2] 原生ajax请求 怎么设置processData这个参数？
[#3] jQuery监听文件上传实现进度条效果
3835
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
